if (depth > 0) {
        repProps.mode = mode === MODE.LONG ? MODE.SHORT : MODE.TINY;
      }
     

      if (nodeIsLongString(item)) {
        repProps.member = {
          open: nodeHasFullText(item) && expanded,
        };
      }

      if (nodeHasGetter(item)) {
        const receiverGrip = getNonPrototypeParentGripValue(item);
        if (receiverGrip) {
          Object.assign(repProps, {
            onInvokeGetterButtonClick: () =>
              this.props.invokeGetter(item, receiverGrip.actor),
          });
        }
      }

      return {
        label,
        value: Utils.renderRep(item, repProps),
      };
    }

    return {
      label,
    };
  }

  getTreeItemProps() {
    const {
      item,
      depth,
      focused,
      expanded,
      onCmdCtrlClick,
      onDoubleClick,
      dimTopLevelWindow,
      onContextMenu,
    } = this.props;

    const classNames = ["node", "object-node"];
    if (focused) {
      classNames.push("focused");
    }

    if (nodeIsBlock(item)) {
      classNames.push("block");
    }

    if (
      !expanded &&
      (nodeIsDefaultProperties(item) ||
        nodeIsPrototype(item) ||
        nodeIsGetter(item) ||
        nodeIsSetter(item) ||
        (dimTopLevelWindow === true && nodeIsWindow(item) && depth === 0))
    ) {
      classNames.push("lessen");
    }

    const parentElementProps = {
      className: classNames.join(" "),
      onClick: e => {
        if (
          onCmdCtrlClick &&
          ((isMacOS && e.metaKey) || (!isMacOS && e.ctrlKey))
        ) {
          onCmdCtrlClick(item, {
            depth,
            event: e,
            focused,
            expanded,
          });
          e.stopPropagation();
          return;
        }

        // If this click happened because the user selected some text, bail out.
        // Note that if the user selected some text before and then clicks here,
        // the previously selected text will be first unselected, unless the
        // user clicked on the arrow itself. Indeed because the arrow is an
        // image, clicking on it does not remove any existing text selection.
        // So we need to also check if the arrow was clicked.
        if (
          e.target &&
          Utils.selection.documentHasSelection(e.target.ownerDocument) &&
          !(e.target.matches && e.target.matches(".theme-twisty"))
        ) {
          e.stopPropagation();
        }
      },
      onContextMenu: e => onContextMenu(e, item),
    };

    if (onDoubleClick) {
      parentElementProps.onDoubleClick = e => {
        e.stopPropagation();
        onDoubleClick(item, {
          depth,
          focused,
          expanded,
        });
      };
    }

    return parentElementProps;
  }

  renderLabel(label) {
    if (label === null || typeof label === "undefined") {
      return null;
    }

    const { item, depth, focused, expanded, onLabelClick } = this.props;
    return dom.span(
      {
        className: "object-label",
        onClick: onLabelClick
          ? event => {
              event.stopPropagation();

              // If the user selected text, bail out.
              if (
                Utils.selection.documentHasSelection(event.target.ownerDocument)
              ) {
                return;
              }

              onLabelClick(item, {
                depth,
                focused,
                expanded,
                setExpanded: this.props.setExpanded,
              });
            }
          : undefined,
      },
      label
    );
  }

  render() {
    const { arrow, renderItemActions, item } = this.props;

    const { label, value } = this.getLabelAndValue();
    const labelElement = this.renderLabel(label);
    const delimiter =
      value && labelElement
        ? dom.span({ className: "object-delimiter" }, ": ")
        : null;

    return dom.div(
      this.getTreeItemProps(),
      this.props.mode === MODE.HEADER ? null : arrow,
      labelElement,
      delimiter,
      value,
      renderItemActions(item)
    );
  }
}

module.exports = ObjectInspectorItem;
PK