/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.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 { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
import React, {
  Component,
  createFactory,
} from "devtools/client/shared/vendor/react";
import {
  div,
  button,
  footer,
} from "devtools/client/shared/vendor/react-dom-factories";
import SearchInput from "../shared/SearchInput";
import EventListeners from "../shared/EventListeners";
import { connect } from "devtools/client/shared/vendor/react-redux";
import {
  getSelectedTraceIndex,
  getFilteredTopTraces,
  getAllTraces,
  getTraceChildren,
  getTraceParents,
  getTraceFrames,
  getAllMutationTraces,
  getAllTraceCount,
  getIsCurrentlyTracing,
  getRuntimeVersions,
  getTraceHighlightedDomEvents,
  getTraceMatchingSearchTraces,
  getTraceMatchingSearchException,
  getTraceMatchingSearchValueOrGrip,
  getIsTracingValues,
} from "../../selectors/index";
import { NO_SEARCH_VALUE } from "../../reducers/tracer-frames";

const { throttle } = require("resource://devtools/shared/throttle.js");
const VirtualizedTree = require("resource://devtools/client/shared/components/VirtualizedTree.js");
const FrameView = createFactory(
  require("resource://devtools/client/shared/components/Frame.js")
);
const Reps = ChromeUtils.importESModule(
  "resource://devtools/client/shared/components/reps/index.mjs"
);
const {
  REPS: { Rep },
  MODE,
} = Reps;
const {
  TRACER_FIELDS_INDEXES,
} = require("resource://devtools/server/actors/tracer.js");
const {
  HTMLTooltip,
} = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");

const { TabPanel, Tabs } = ChromeUtils.importESModule(
  "resource://devtools/client/shared/components/tabs/Tabs.mjs",
  { global: "current" }
);

import actions from "../../actions/index";

const isMacOS = AppConstants.platform == "macosx";
const TREE_NODE_HEIGHT = 20;
const DEBUG = false;

export class Tracer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // List of expanded traces in the tree
      expanded: new Set(),

      // First visible trace's index.
      // Note that these two indexes aren't related to the VirtualizedTree viewport.
      // That's the possibly visible traces when scrolling top/bottom of the whole Tree.
      startIndex: 0,

      // Last visible trace's index. -1 is we should show all of them at the end.
      // As soon as we start scrolling via the left slider, new traces are added outside of the selected viewport.
      endIndex: -1,

      // Number of trace rendered in the timeline and the tree (considering the tree is expanded, less may be displayed based on collapsing)
      renderedTraceCount: 0,

      // Index of the currently selected tab (traces or events)
      selectedTabIndex: 0,
    };

    this.onSliderClick = this.onSliderClick.bind(this);
    this.onSliderWheel = this.onSliderWheel.bind(this);
    this.resetZoom = this.resetZoom.bind(this);

    // Throttle requests to update the trace argument search query as it is a costly operation
    this.throttledUpdateSearch = throttle(
      this.throttledUpdateSearch.bind(this),
      250
    );
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { traceParents } = this.props;
    if (
      nextProps.selectedTraceIndex != this.props.selectedTraceIndex &&
      nextProps.selectedTraceIndex != null
    ) {
      const { expanded } = this.state;
      let index = traceParents[nextProps.selectedTraceIndex];
      while (index) {
        expanded.add(index);
        index = traceParents[index];
      }
      this.setState({ expanded });
    }

    // Force update the renderedTraceCount when we receive new traces
    if (nextProps.traceCount != this.props.traceCount) {
      if (nextProps.traceCount == 0) {
        // Reset the indexes when the view is cleared (i.e. when we just started recording a new trace)
        this.updateIndexes(
          {
            startIndex: 0,
            endIndex: -1,
          },
          nextProps
        );
      } else {
        this.updateIndexes(
          {
            startIndex: this.state.startIndex,
            endIndex: this.state.endIndex,
          },
          nextProps
        );
      }
    }
  }

  componentDidMount() {
    // Prevent toolbox zooming when using Ctrl+Wheel on the slider.
    // (for some reason... React doesn't seem to register the right "wheel", event listener via `onWheel`,
    //  which is the one to cancel to prevent toolbox zooming code to work.)
    this.refs.timeline.onwheel = e => e.preventDefault();

    if (!this.tooltip) {
      this.instantiateTooltip();
    }

    // Force updating indexes when we navigate back to the tracer sidebar.
    // For example, when we navigated away to the source tree.
    if (!this.state.renderedTraceCount) {
      this.updateIndexes(
        {
          startIndex: this.state.startIndex,
          endIndex: this.state.endIndex,
        },
        this.props
      );
    }
  }

  instantiateTooltip() {
    this.tooltip = new HTMLTooltip(this.refs.timeline.ownerDocument, {
      className: "event-tooltip",
      type: "arrow",
      // Avoid consuming the first click on the anchored UI element in the slider
      consumeOutsideClicks: false,
    });
    this.tooltip.setContentSize({ height: "auto" });
    this.tooltip.startTogglingOnHover(this.refs.timeline, (target, tooltip) => {
      if (target.classList.contains("tracer-slider-event")) {
        const { traceIndex } = target.dataset;
        const trace = this.props.allTraces[traceIndex];
        const eventName = trace[TRACER_FIELDS_INDEXES.EVENT_NAME];
        const eventType = getEventClassNameFromTraceEventName(eventName);
        tooltip.panel.innerHTML = "";
        const el = document.createElement("div");
        el.classList.add("tracer-dom-event", eventType);
        el.textContent = `DOM | ${eventName}`;
        tooltip.panel.append(
          el,
          document.createElement("hr"),
          document.createTextNode(
            "Double click to focus on the executions related to this event."
          )
        );
        return true;
      } else if (target.classList.contains("tracer-slider-mutation")) {
        const { traceIndex } = target.dataset;
        const trace = this.props.allTraces[traceIndex];
        const mutationType = trace[TRACER_FIELDS_INDEXES.DOM_MUTATION_TYPE];
        tooltip.panel.innerHTML = "";
        const el = document.createElement("div");
        el.classList.add("tracer-dom-mutation");
        el.textContent = `DOM Mutation | ${mutationType}`;
        tooltip.panel.append(
          el,
          document.createElement("hr"),
          document.createTextNode(
            "Click to find the call tree leading to this mutation."
          )
        );
        return true;
      }
      return false;
    });
  }

  componentDidUpdate() {
    if (DEBUG) {
      dump(
        ` # start: ${this.state.startIndex} end: ${this.state.endIndex} rendered: ${this.state.renderedTraceCount} traceCount:${this.props.traceCount}\n`
      );
    }
  }

  renderCallTree() {
    let {
      selectedTraceIndex,
      topTraces,
      allTraces,
      traceChildren,
      traceParents,
    } = this.props;
    // Print warning message when there is no trace recorded yet
    if (!allTraces.length) {
      if (!this.props.isTracing) {
        // We can't yet distinguish being completely off or pending for next interaction or load
        return div(
          { className: "tracer-message" },
          "Tracer is off, or pending for next interaction/load."
        );
      }
      return div(
        { className: "tracer-message" },
        "Waiting for the first JavaScript executions"
      );
    }

    // If there is some traces in allTraces but none in topTraces,
    // it means that they were all filtered out.
    if (!topTraces.length) {
      // Use distinct message when we are showing only a slice of the record, of the whole record
      if (this.state.renderedTraceCount != this.props.traceCount) {
        return div(
          { className: "tracer-message" },
          "All traces have been filtered out, in the slice of the record"
        );
      }
      return div(
        { className: "tracer-message" },
        "All traces have been filtered out"
      );
    }

    // Indexes are floating number, so convert them to a decimal number as indexes in the trace array
    let { startIndex, endIndex } = this.state;
    startIndex = Math.floor(startIndex);
    endIndex = Math.floor(endIndex);

    if (startIndex != 0 || endIndex != -1) {
      // When we start zooming, only consider traces whose top level frame
      // is in the zoomed section.

      // Lookup for the first top trace after the start index
      let topTracesStartIndex = 0;
      if (startIndex != 0) {
        topTracesStartIndex = -1;
        for (let i = 0; i < topTraces.length; i++) {
          const traceIndex = topTraces[i];
          if (traceIndex >= startIndex) {
            topTracesStartIndex = i;
            break;
          }
        }
      }

      // Lookup for the first top trace from the end before the end index
      let topTracesEndIndex = topTraces.length;
      if (endIndex != -1) {
        for (let i = topTraces.length; i >= 0; i--) {
          const traceIndex = topTraces[i];
          if (traceIndex <= endIndex) {
            topTracesEndIndex = i + 1;
            break;
          }
        }
      }

      if (topTracesStartIndex == -1) {
        // When none of the top traces are within the selected range, pick the start index of top trace.
        // This happens when we zoom on the last call tree at the end of the record.
        topTraces = [startIndex];
      } else {
        topTraces = topTraces.slice(topTracesStartIndex, topTracesEndIndex);
      }

      // When the top trace isn't the top most one (`!0`) and isn't a top trace (`!topTraces[0]`),
      // We need to add the current start trace as a top trace, as well as all its following siblings
      // and the following siblings of parent traces recursively.
      // This help show partial call tree when scrolling/zooming with a partial view on a call stack.
      //
      // Note that for endIndex, the cut is being done in VirtualizedTree's getChildren function.
      if (startIndex != 0 && topTraces[0] != startIndex) {
        const results = [];
        results.push(startIndex);
        collectAllSiblings(traceParents, traceChildren, startIndex, results);
        topTraces.unshift(...results);
      }
    }

    return React.createElement(VirtualizedTree, {
      itemHeight: TREE_NODE_HEIGHT,
      autoExpandDepth: 1,
      getRoots() {
        return topTraces;
      },
      getKey(traceIndex) {
        return `${traceIndex}`;
      },
      getParent(traceIndex) {
        return traceParents[traceIndex];
      },
      getChildren(traceIndex) {
        // When we aren't displaying all children up to the end of the record,
        // we may need to remove children that are outside of the viewport.
        if (endIndex != -1) {
          return traceChildren[traceIndex].filter(index => {
            return index < endIndex;
          });
        }
        return traceChildren[traceIndex];
      },

      isExpanded: traceIndex => {
        return this.state.expanded.has(traceIndex);
      },
      onExpand: traceIndex => {
        const { expanded } = this.state;
        expanded.add(traceIndex);
        this.setState({ expanded });
      },
      onCollapse: traceIndex => {
        const { expanded } = this.state;
        expanded.delete(traceIndex);
        this.setState({ expanded });
      },

      focused: selectedTraceIndex,
      onFocus: traceIndex => {
        this.props.selectTrace(traceIndex);
      },

      shown: selectedTraceIndex,

      renderItem: (traceIndex, _depth, isFocused, arrow, _isExpanded) => {
        const trace = allTraces[traceIndex];
        const type = trace[TRACER_FIELDS_INDEXES.TYPE];

        if (type == "event") {
          // Trace for DOM Events are always top level trace (and do not need margin/indent)
          const eventName = trace[TRACER_FIELDS_INDEXES.EVENT_NAME];

          const eventType = getEventClassNameFromTraceEventName(eventName);
          return div(
            {
              className: "trace-line",
            },
            arrow,
            div(
              {
                className: `tracer-dom-event ${eventType}${
                  selectedTraceIndex == traceIndex ? " selected" : ""
                }`,

                onDoubleClick: () => {
                  this.focusOnTrace(traceIndex);
                },
              },
              `DOM | ${eventName}`
            )
          );
        }

        if (type == "dom-mutation") {
          // Trace for DOM Mutations are always a leaf and don't have children.
          const mutationType = trace[TRACER_FIELDS_INDEXES.DOM_MUTATION_TYPE];
          return div(
            {
              className: `tracer-dom-mutation${
                selectedTraceIndex == trace ? " selected" : ""
              }`,
            },
            `DOM Mutation | ${mutationType}`
          );
        }

        if (type == "exit") {
          return null;
        }

        let className = "";
        if (selectedTraceIndex) {
          let idx = selectedTraceIndex;
          let onStack = false;
          while ((idx = traceParents[idx])) {
            if (idx == traceIndex) {
              onStack = true;
              break;
            }
          }
          if (onStack) {
            className += " onstack";
          }
        }
        const frameIndex = trace[TRACER_FIELDS_INDEXES.FRAME_INDEX];
        const frame = this.props.frames[frameIndex];
        return div(
          {
            className: "trace-line",
            onDoubleClick: () => {
              this.focusOnTrace(traceIndex);
            },
          },
          arrow,
          FrameView({
            className,
            showFunctionName: true,
            showAnonymousFunctionName: true,
            // Frame's savedFrameToLocation mess up with the frame object
            // by incrementing the column unexpectedly.
            frame: { ...frame, column: frame.column + 1 },
            sourceMapURLService: window.sourceMapURLService,
          })
        );
      },
    });
  }

  onSliderClick(event) {
    const { top, height } = this.refs.sliceSlider.getBoundingClientRect();
    const yInSlider = event.clientY - top;
    const mousePositionRatio = yInSlider / height;

    // Indexes and ratios are floating number whereas
    // we expect to pass an array index to `selectTrace`.
    const index = Math.round(
      this.state.startIndex + mousePositionRatio * this.state.renderedTraceCount
    );

    const { traceParents } = this.props;
    const parentIndex = getTraceParentIndex(traceParents, index);
    // Ignore the click if we clicked on a filtered out / not-rendered trace.
    // `topTraces` contains the visible top-most parent trace indexes.
    if (!this.props.topTraces.includes(parentIndex)) {
      return;
    }

    this.props.selectTrace(index);
  }

  onSliderWheel(event) {
    const direction = event.deltaY > 0 ? 1 : -1;
    const scrolledDelta = Math.abs(event.deltaY) * 0.01;

    let { startIndex, endIndex } = this.state;

    if (isMacOS ? event.metaKey : event.ctrlKey) {
      // Handle zooming it/out as we are either using CtrlOrMeta+Wheel or zooming via the touchpad

      // Compute the ratio (a percentage) of the position where the mouse or touch started zooming from
      const { top, height } = this.refs.sliceSlider.getBoundingClientRect();
      const yInSlider = event.clientY - top;
      const zoomOriginRatio = yInSlider / height;

      // Compute the number of indexes we should add or remove to both indexes
      const shift = Math.floor(
        Math.max(this.state.renderedTraceCount * scrolledDelta, 2) * direction
      );

      // Use the origin ratio in order to try to zoom where the cursor is
      // and distribute the shift between start and end according to its position.
      startIndex -= shift * zoomOriginRatio;
      if (endIndex == -1) {
        endIndex = this.props.traceCount + shift * (1 - zoomOriginRatio);
      } else {
        endIndex += shift * (1 - zoomOriginRatio);
      }
    } else {
      // Handle scrolling up/down as We are doing a simple scroll via wheel or touchpad

      // Avoid scrolling if we already at top or bottomn
      if (
        (direction < 0 && startIndex == 0) ||
        (direction > 0 && endIndex == -1)
      ) {
        return;
      }

      // Compute the number of indexes we should add or remove to both indexes
      const shift =
        Math.max(1, this.state.renderedTraceCount * scrolledDelta) * direction;
      startIndex += shift;
      if (endIndex == -1) {
        endIndex = this.props.traceCount + shift;
      } else {
        endIndex += shift;
      }
    }

    // Normalize the computed indexes.
    // start can't be lower than zero
    startIndex = Math.max(0, startIndex);
    // start can't be greater than the trace count
    startIndex = Math.min(startIndex, this.props.traceCount - 1);

    if (endIndex != -1) {
      // end can't be lower than start + 1
      endIndex = Math.max(startIndex + 1, endIndex);
      // end also can't be higher than the total number of traces
      if (endIndex >= this.props.traceCount) {
        // -1 means, there is no end filtering
        endIndex = -1;
      }
    }

    this.updateIndexes({
      startIndex,
      endIndex,
    });
  }

  updateIndexes({ startIndex, endIndex }, nextProps = this.props) {
    const renderedTraceCount =
      (endIndex == -1 ? nextProps.traceCount : endIndex) - startIndex;
    this.setState({
      startIndex,
      endIndex,
      renderedTraceCount,
    });
    if (this.tooltip) {
      this.tooltip.hide();
    }
  }

  focusOnTrace(traceIndex) {
    // Force selecting the call traces panel
    this.setState({ selectedTabIndex: 0 });

    const lastTraceIndex = findLastTraceIndex(
      this.props.traceChildren,
      traceIndex
    );
    this.updateIndexes({
      startIndex: traceIndex,
      endIndex: lastTraceIndex,
    });
  }

  resetZoom() {
    this.updateIndexes({
      startIndex: 0,
      endIndex: -1,
    });
  }

  tracePositionInPercent(traceIndex) {
    return Math.round(
      ((traceIndex - this.state.startIndex) / this.state.renderedTraceCount) *
        100
    );
  }

  renderMutationsInSlider() {
    const { mutationTraces, allTraces } = this.props;
    const { startIndex, endIndex } = this.state;

    const displayedMutationTraces = [];
    for (const traceIndex of mutationTraces) {
      if (
        traceIndex >= startIndex &&
        (endIndex == -1 || traceIndex <= endIndex)
      ) {
        displayedMutationTraces.push(traceIndex);
      }
    }

    return displayedMutationTraces.map(traceIndex => {
      const symbol = {
        add: "+",
        attributes: "=",
        remove: "-",
      };
      const trace = allTraces[traceIndex];
      const mutationType = trace[TRACER_FIELDS_INDEXES.DOM_MUTATION_TYPE];
      return div(
        {
          className: `tracer-slider-mutation`,
          "data-trace-index": traceIndex,
          style: {
            top: `${this.tracePositionInPercent(traceIndex)}%`,
          },
          onClick: event => {
            event.preventDefault();
            event.stopPropagation();
            this.props.selectTrace(traceIndex);
          },
        },
        symbol[mutationType]
      );
    });
  }

  renderEventsInSlider() {
    // When getting back to tracer sidebar after having moved to any other side panel, like source tree,
    // the timeline is null and would crash here.
    if (!this.refs.timeline) {
      return null;
    }
    const { topTraces, allTraces, traceChildren } = this.props;
    const { startIndex, endIndex } = this.state;

    // Compute only once the percentage value for 1px
    const onePixelPercent = 1 / this.refs.timeline.clientHeight;

    const displayedTraceEvents = [];
    for (const traceIndex of topTraces) {
      // Match the last event index in order to allow showing partial event
      // which may not be complete at the beginning of the record when we are zoomed.
      const lastTraceIndex = findLastTraceIndex(traceChildren, traceIndex);
      if (
        lastTraceIndex >= startIndex &&
        (endIndex == -1 || traceIndex <= endIndex)
      ) {
        displayedTraceEvents.push(traceIndex);
      }
    }

    return displayedTraceEvents.map(traceIndex => {
      const trace = allTraces[traceIndex];
      if (trace[TRACER_FIELDS_INDEXES.TYPE] != "event") {
        return null;
      }

      const eventPositionInPercent = this.tracePositionInPercent(traceIndex);
      const lastTraceIndex = findLastTraceIndex(traceChildren, traceIndex);
      const eventHeightInPercentFloat =
        ((lastTraceIndex - traceIndex) / this.state.renderedTraceCount) * 100;
      const eventHeightInPercent = Math.round(eventHeightInPercentFloat);
      const eventName = trace[TRACER_FIELDS_INDEXES.EVENT_NAME];
      const eventType = getEventClassNameFromTraceEventName(eventName);

      // Is it being highlighted when hovering a category of events or one specific event in the DOM events panel
      const highlighted = this.props.highlightedDomEvents.includes(eventName);

      // Give some hint to the CSS to know if the item is smaller than a pixel.
      // It will still be visible, but we can stop some expensive stylings.
      let sizeClass = "";
      if (eventHeightInPercent < onePixelPercent) {
        sizeClass = "size-subpixel";
      }

      return div({
        className: `tracer-slider-event ${eventType}${
          highlighted ? " highlighted" : ""
        } ${sizeClass}`,
        "data-trace-index": traceIndex,
        style: {
          top: `${eventPositionInPercent}%`,
          height: `${Math.max(
            Math.min(eventHeightInPercent, 100 - eventPositionInPercent),
            1
          )}%`,
        },
        onClick: event => {
          event.preventDefault();
          event.stopPropagation();
          this.props.selectTrace(traceIndex);
        },
        onDoubleClick: () => {
          this.focusOnTrace(traceIndex);
        },
      });
    });
  }

  renderVerticalSliders() {
    if (!this.props.traceCount) {
      // Always return the top element so that componentDidMount can register its wheel listener
      return div({
        className: "tracer-timeline hidden",
        ref: "timeline",
        onWheel: this.onSliderWheel,
      });
    }

    const { selectedTraceIndex } = this.props;

    const { startIndex, endIndex } = this.state;

    let selectedHighlightHeight;
    if (selectedTraceIndex > startIndex + this.state.renderedTraceCount) {
      selectedHighlightHeight = 100;
    } else if (selectedTraceIndex < startIndex) {
      selectedHighlightHeight = 0;
    } else {
      selectedHighlightHeight = this.tracePositionInPercent(selectedTraceIndex);
    }

    const classnames = [];
    if (startIndex > 0) {
      classnames.push("cut-start");
    }
    if (endIndex != -1) {
      classnames.push("cut-end");
    }
    if (selectedTraceIndex) {
      if (selectedTraceIndex < startIndex) {
        classnames.push("selected-before");
      } else if (endIndex != -1 && selectedTraceIndex > endIndex) {
        classnames.push("selected-after");
      }
    }

    const isZoomed = this.state.renderedTraceCount != this.props.traceCount;
    return div(
      {
        className: "tracer-timeline",
      },
      div(
        {
          className: `tracer-slider-box ${classnames.join(" ")}`,
          ref: "timeline",
          onWheel: this.onSliderWheel,
        },
        div(
          {
            className: "tracer-slice-slider ",
            ref: "sliceSlider",
            onClick: this.onSliderClick,
            style: {
              "--slider-bar-progress": `${selectedHighlightHeight}%`,
            },
          },
          selectedTraceIndex
            ? div({
                className: "tracer-slider-bar",
              })
            : null,
          selectedTraceIndex &&
            selectedTraceIndex >= startIndex &&
            selectedTraceIndex <= startIndex + this.state.renderedTraceCount
            ? div({
                className: "tracer-slider-position",
              })
            : null,
          this.renderEventsInSlider(),
          this.renderMutationsInSlider()
        )
      ),
      isZoomed
        ? button(
            {
              className: "tracer-reset-zoom",
              onClick: this.resetZoom,
            },
            "Reset zoom"
          )
        : null
    );
  }

  searchInputOnChange = e => {
    const searchString = e.target.value;

    // Throttle the calls to searchTraceArgument as that a costly operation
    this.throttledUpdateSearch(searchString);
  };

  throttledUpdateSearch(searchString) {
    this.props.searchTraceArguments(searchString);
  }

  /**
   * Select the next or previous trace according to the current search string
   *
   * @param {boolean} goForward
   *                  Select the next matching trace if true,
   *                  otherwise select the previous one.
   */
  selectNextMatchingTrace = goForward => {
    const { tracesMatchingSearch, allTraces } = this.props;
    const selectedTrace = allTraces[this.props.selectedTraceIndex];
    const currentIndexInMatchingArray =
      tracesMatchingSearch.indexOf(selectedTrace);

    let nextIndexInMatchingArray;
    if (goForward) {
      // If we aren't selecting any of the matching traces, or the last one,
      // select the first matching trace.
      if (
        currentIndexInMatchingArray == -1 ||
        currentIndexInMatchingArray == tracesMatchingSearch.length - 1
      ) {
        nextIndexInMatchingArray = 0;
      } else {
        nextIndexInMatchingArray = currentIndexInMatchingArray + 1;
      }
    } else if (
      currentIndexInMatchingArray == -1 ||
      currentIndexInMatchingArray == 0
    ) {
      nextIndexInMatchingArray = tracesMatchingSearch.length - 1;
    } else {
      nextIndexInMatchingArray = currentIndexInMatchingArray - 1;
    }

    // `selectTrace` expect a trace index (and not a trace object)
    const nextTraceIndex = allTraces.indexOf(
      tracesMatchingSearch[nextIndexInMatchingArray]
    );

    this.props.selectTrace(nextTraceIndex);
  };

  renderCallTreeSearchInput() {
    const { tracesMatchingSearch, searchExceptionMessage, searchValueOrGrip } =
      this.props;
    return [
      React.createElement(SearchInput, {
        count: tracesMatchingSearch.length,

        placeholder: this.props.traceValues
          ? `Search for function call argument values ("foo", 42, $0, $("canvas"), …)`
          : "Enable tracing values to search for values",
        disabled: !this.props.traceValues,
        size: "small",
        showClose: false,
        onChange: this.searchInputOnChange,
        onKeyDown: e => {
          if (e.key == "Enter") {
            // Shift key will reverse the selection direction
            this.selectNextMatchingTrace(!e.shiftKey);
          }
        },
        handlePrev: () => this.selectNextMatchingTrace(false),
        handleNext: () => this.selectNextMatchingTrace(true),
      }),

      // When this isn't a valid primitive type, we try to evaluate on the server
      // and show the exception, if one was thrown
      searchExceptionMessage
        ? div({ className: "search-exception" }, searchExceptionMessage)
        : null,

      // When we have a valid search string, either matching a primitive type or an object,
      // we display it here, alongside the number of matches
      this.props.traceValues && searchValueOrGrip != NO_SEARCH_VALUE
        ? div(
            { className: "search-value" },
            "Searching for:",
            Rep({
              object: searchValueOrGrip,
              mode: MODE.SHORT,
              onDOMNodeClick: () =>
                this.props.openElementInInspector(searchValueOrGrip),
              onInspectIconClick: () =>
                this.props.openElementInInspector(searchValueOrGrip),
              onDOMNodeMouseOver: () =>
                this.props.highlightDomElement(searchValueOrGrip),
              onDOMNodeMouseOut: () => this.props.unHighlightDomElement(),
            }),
            ` (${tracesMatchingSearch.length} match(es))`
          )
        : null,
    ];
  }

  render() {
    const { runtimeVersions } = this.props;

    return div(
      {
        className: "tracer-container",
        style: {
          "--tree-node-height": `${TREE_NODE_HEIGHT}px`,
        },
      },
      div(
        { className: "tracer-toolbar" },
        this.props.traceCount == 0
          ? div(
              {
                className: "tracer-experimental-notice",
              },
              "This panel is experimental. It may change, regress, be dropped or replaced."
            )
          : null,
        runtimeVersions &&
          runtimeVersions.localPlatformVersion !=
            runtimeVersions.remotePlatformVersion
          ? div(
              {
                className: "tracer-runtime-version-mismatch",
              },
              `Client and remote runtime have different versions (${runtimeVersions.localPlatformVersion} vs ${runtimeVersions.remotePlatformVersion}) . The Tracer may be broken because of protocol changes between these two versions. Please upgrade or downgrade one of the two to use the same major version.`
            )
          : null
      ),
      this.renderVerticalSliders(),
      React.createElement(
        Tabs,
        {
          activeTab: this.state.selectedTabIndex || 0,
          onAfterChange: index => {
            this.setState({ selectedTabIndex: index });
          },
        },
        React.createElement(
          TabPanel,
          {
            id: "tracer-traces",
            title: "Call Traces",
          },
          div(
            { className: "call-tree-container" },
            ...this.renderCallTreeSearchInput(),
            this.renderCallTree()
          )
        ),
        React.createElement(
          TabPanel,
          {
            id: "tracer-events",
            title: "DOM Events",
          },
          div(
            { className: "event-listeners-container" },
            React.createElement(EventListeners, {
              panelKey: "tracer",
            }),
            footer(
              null,
              `${
                isMacOS ? "Cmd" : "Ctrl"
              } + Click to select only one category or event`
            )
          )
        )
      )
    );
  }
}

/**
 * Walk through the call tree to find the very last children frame
 * and return its trace index.
 *
 * @param {object} traceChildren
 *                 The reducer data containing children trace indexes for all the traces.
 * @param {number} traceIndex
 */
function findLastTraceIndex(traceChildren, traceIndex) {
  const children = traceChildren[traceIndex];
  if (!children.length) {
    return traceIndex;
  }
  return findLastTraceIndex(traceChildren, children.at(-1));
}

/**
 * Store in the `results` attribute all following siblings for a given trace,
 * as well as for its parents, that, recursively up to the top traces.
 *
 * @param {object} traceParents
 *                 The reducer data containing parent trace index for all the traces.
 * @param {object} traceChildren
 *                 The reducer data containing children trace indexes for all the traces.
 * @param {number} traceIndex
 * @param {Array} results
 */
function collectAllSiblings(traceParents, traceChildren, traceIndex, results) {
  const parentIndex = traceParents[traceIndex];
  if (parentIndex != null) {
    const parentChildren = traceChildren[parentIndex];
    const indexInItsParent = parentChildren.indexOf(traceIndex);
    const siblingTraces = parentChildren.slice(indexInItsParent + 1);
    if (siblingTraces.length) {
      results.push(...siblingTraces);
    }
    collectAllSiblings(traceParents, traceChildren, parentIndex, results);
  }
}

/**
 * Given the TRACER_FIELDS_INDEXES.EVENT_NAME field of a trace,
 * return the classname to use for a given event trace.
 *
 * @param {string} eventName
 */
function getEventClassNameFromTraceEventName(eventName) {
  let eventType = "other";
  // Bug 1916755 should be using DOM Event categories instead of having such a custom mapping
  if (
    eventName.startsWith("global.mouse") ||
    eventName.startsWith("global.click") ||
    eventName.startsWith("node.mouse") ||
    eventName.startsWith("node.click")
  ) {
    eventType = "mouse";
  } else if (
    eventName.startsWith("global.key") ||
    eventName.startsWith("node.key")
  ) {
    eventType = "key";
  }
  return eventType;
}

/**
 * Return the index of the top-most parent frame for a given trace index.
 *
 * @param {object} traceParents
 *                 The reducer data containing parent trace index for all the traces.
 * @param {number} traceIndex
 * @return {number} The top-most parent trace index
 */
function getTraceParentIndex(traceParents, index) {
  const parentIndex = traceParents[index];
  if (parentIndex == undefined) {
    return index;
  }
  return getTraceParentIndex(traceParents, parentIndex);
}

const mapStateToProps = state => {
  return {
    isTracing: getIsCurrentlyTracing(state),
    topTraces: getFilteredTopTraces(state),
    allTraces: getAllTraces(state),
    traceChildren: getTraceChildren(state),
    traceParents: getTraceParents(state),
    frames: getTraceFrames(state),
    mutationTraces: getAllMutationTraces(state),
    traceCount: getAllTraceCount(state),
    selectedTraceIndex: getSelectedTraceIndex(state),
    runtimeVersions: getRuntimeVersions(state),
    highlightedDomEvents: getTraceHighlightedDomEvents(state),
    tracesMatchingSearch: getTraceMatchingSearchTraces(state),
    searchExceptionMessage: getTraceMatchingSearchException(state),
    searchValueOrGrip: getTraceMatchingSearchValueOrGrip(state),
    traceValues: getIsTracingValues(state),
  };
};

export default connect(mapStateToProps, {
  selectTrace: actions.selectTrace,
  searchTraceArguments: actions.searchTraceArguments,
  openElementInInspector: actions.openElementInInspectorCommand,
  highlightDomElement: actions.highlightDomElement,
  unHighlightDomElement: actions.unHighlightDomElement,
})(Tracer);