/*
 * Copyright (C) 2012 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 * 1. Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
 * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 * @constructor
 * @extends {WebInspector.Widget}
 * @param {boolean} isVertical
 * @param {boolean} secondIsSidebar
 * @param {string=} settingName
 * @param {number=} defaultSidebarWidth
 * @param {number=} defaultSidebarHeight
 * @param {boolean=} constraintsInDip
 */
WebInspector.SplitWidget = function(isVertical, secondIsSidebar, settingName, defaultSidebarWidth, defaultSidebarHeight, constraintsInDip)
{
    WebInspector.Widget.call(this, true);
    this.element.classList.add("split-widget");
    this.registerRequiredCSS("ui/splitWidget.css");

    this.contentElement.classList.add("shadow-split-widget");
    this._mainElement = this.contentElement.createChild("div", "shadow-split-widget-contents shadow-split-widget-main vbox");
    this._mainElement.createChild("content").select = ".insertion-point-main";
    this._sidebarElement = this.contentElement.createChild("div", "shadow-split-widget-contents shadow-split-widget-sidebar vbox");
    this._sidebarElement.createChild("content").select = ".insertion-point-sidebar";
    this._resizerElement = this.contentElement.createChild("div", "shadow-split-widget-resizer");

    this._resizerWidget = new WebInspector.SimpleResizerWidget();
    this._resizerWidget.setEnabled(true);
    this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart, this._onResizeStart, this);
    this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate, this);
    this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);

    this._defaultSidebarWidth = defaultSidebarWidth || 200;
    this._defaultSidebarHeight = defaultSidebarHeight || this._defaultSidebarWidth;
    this._constraintsInDip = !!constraintsInDip;
    this._setting = settingName ? WebInspector.settings.createSetting(settingName, {}) : null;

    this.setSecondIsSidebar(secondIsSidebar);

    this._innerSetVertical(isVertical);
    this._showMode = WebInspector.SplitWidget.ShowMode.Both;

    // Should be called after isVertical has the right value.
    this.installResizer(this._resizerElement);
}

/** @typedef {{showMode: string, size: number}} */
WebInspector.SplitWidget.SettingForOrientation;

WebInspector.SplitWidget.ShowMode = {
    Both: "Both",
    OnlyMain: "OnlyMain",
    OnlySidebar: "OnlySidebar"
}

WebInspector.SplitWidget.Events = {
    SidebarSizeChanged: "SidebarSizeChanged",
    ShowModeChanged: "ShowModeChanged"
}

WebInspector.SplitWidget.MinPadding = 20;

WebInspector.SplitWidget.prototype = {
    /**
     * @return {boolean}
     */
    isVertical: function()
    {
        return this._isVertical;
    },

    /**
     * @param {boolean} isVertical
     */
    setVertical: function(isVertical)
    {
        if (this._isVertical === isVertical)
            return;

        this._innerSetVertical(isVertical);

        if (this.isShowing())
            this._updateLayout();
    },

    /**
     * @param {boolean} isVertical
     */
    _innerSetVertical: function(isVertical)
    {
        this.contentElement.classList.toggle("vbox", !isVertical);
        this.contentElement.classList.toggle("hbox", isVertical);
        this._isVertical = isVertical;

        delete this._resizerElementSize;
        this._sidebarSizeDIP = -1;
        this._restoreSidebarSizeFromSettings();
        if (this._shouldSaveShowMode)
            this._restoreAndApplyShowModeFromSettings();
        this._updateShowHideSidebarButton();
        // FIXME: reverse SplitWidget.isVertical meaning.
        this._resizerWidget.setVertical(!isVertical);
        this.invalidateConstraints();
    },

    /**
     * @param {boolean=} animate
     */
    _updateLayout: function(animate)
    {
        delete this._totalSizeCSS; // Lazy update.
        delete this._totalSizeOtherDimensionCSS;

        // Remove properties that might affect total size calculation.
        this._mainElement.style.removeProperty("width");
        this._mainElement.style.removeProperty("height");
        this._sidebarElement.style.removeProperty("width");
        this._sidebarElement.style.removeProperty("height");

        this._innerSetSidebarSizeDIP(this._preferredSidebarSizeDIP(), !!animate);
    },

    /**
     * @param {!WebInspector.Widget} widget
     */
    setMainWidget: function(widget)
    {
        if (this._mainWidget === widget)
            return;
        if (this._mainWidget)
            this._mainWidget.detach();
        this._mainWidget = widget;
        if (widget) {
            widget.element.classList.add("insertion-point-main");
            widget.element.classList.remove("insertion-point-sidebar");
            if (this._showMode === WebInspector.SplitWidget.ShowMode.OnlyMain || this._showMode === WebInspector.SplitWidget.ShowMode.Both)
                widget.show(this.element);
        }
    },

    /**
     * @param {!WebInspector.Widget} widget
     */
    setSidebarWidget: function(widget)
    {
        if (this._sidebarWidget === widget)
            return;
        if (this._sidebarWidget)
            this._sidebarWidget.detach();
        this._sidebarWidget = widget;
        if (widget) {
            widget.element.classList.add("insertion-point-sidebar");
            widget.element.classList.remove("insertion-point-main");
            if (this._showMode === WebInspector.SplitWidget.ShowMode.OnlySidebar || this._showMode === WebInspector.SplitWidget.ShowMode.Both)
                widget.show(this.element);
        }
    },

    /**
     * @return {?WebInspector.Widget}
     */
    mainWidget: function()
    {
        return this._mainWidget;
    },

    /**
     * @return {?WebInspector.Widget}
     */
    sidebarWidget: function()
    {
        return this._sidebarWidget;
    },

    /**
     * @override
     * @param {!WebInspector.Widget} widget
     */
    childWasDetached: function(widget)
    {
        if (this._detaching)
            return;
        if (this._mainWidget === widget)
            delete this._mainWidget;
        if (this._sidebarWidget === widget)
            delete this._sidebarWidget;
    },

    /**
     * @return {boolean}
     */
    isSidebarSecond: function()
    {
        return this._secondIsSidebar;
    },

    enableShowModeSaving: function()
    {
        this._shouldSaveShowMode = true;
        this._restoreAndApplyShowModeFromSettings();
    },

    /**
     * @return {string}
     */
    showMode: function()
    {
        return this._showMode;
    },

    /**
     * @param {boolean} secondIsSidebar
     */
    setSecondIsSidebar: function(secondIsSidebar)
    {
        this.contentElement.classList.toggle("shadow-split-widget-first-is-sidebar", !secondIsSidebar);
        this._secondIsSidebar = secondIsSidebar;
    },

    /**
     * @return {?string}
     */
    sidebarSide: function()
    {
        if (this._showMode !== WebInspector.SplitWidget.ShowMode.Both)
            return null;
        return this._isVertical ?
            (this._secondIsSidebar ? "right" : "left") :
            (this._secondIsSidebar ? "bottom" : "top");
    },

    /**
     * @return {!Element}
     */
    resizerElement: function()
    {
        return this._resizerElement;
    },

    /**
     * @param {boolean=} animate
     */
    hideMain: function(animate)
    {
        this._showOnly(this._sidebarWidget, this._mainWidget, this._sidebarElement, this._mainElement, animate);
        this._updateShowMode(WebInspector.SplitWidget.ShowMode.OnlySidebar);
    },

    /**
     * @param {boolean=} animate
     */
    hideSidebar: function(animate)
    {
        this._showOnly(this._mainWidget, this._sidebarWidget, this._mainElement, this._sidebarElement, animate);
        this._updateShowMode(WebInspector.SplitWidget.ShowMode.OnlyMain);
    },

    /**
     * @param {boolean} minimized
     */
    setSidebarMinimized: function(minimized)
    {
        this._sidebarMinimized = minimized;
        this.invalidateConstraints();
    },

    /**
     * @return {boolean}
     */
    isSidebarMinimized: function()
    {
        return this._sidebarMinimized;
    },

    /**
     * @param {!WebInspector.Widget} sideToShow
     * @param {!WebInspector.Widget} sideToHide
     * @param {!Element} shadowToShow
     * @param {!Element} shadowToHide
     * @param {boolean=} animate
     */
    _showOnly: function(sideToShow, sideToHide, shadowToShow, shadowToHide, animate)
    {
        this._cancelAnimation();

        /**
         * @this {WebInspector.SplitWidget}
         */
        function callback()
        {
            if (sideToShow) {
                // Make sure main is first in the children list.
                if (sideToShow === this._mainWidget)
                    this._mainWidget.show(this.element, this._sidebarWidget ? this._sidebarWidget.element : null);
                else
                    this._sidebarWidget.show(this.element);
            }
            if (sideToHide) {
                this._detaching = true;
                sideToHide.detach();
                delete this._detaching;
            }

            this._resizerElement.classList.add("hidden");
            shadowToShow.classList.remove("hidden");
            shadowToShow.classList.add("maximized");
            shadowToHide.classList.add("hidden");
            shadowToHide.classList.remove("maximized");
            this._removeAllLayoutProperties();
            this.doResize();
        }

        if (animate)
            this._animate(true, callback.bind(this));
        else
            callback.call(this);

        this._sidebarSizeDIP = -1;
        this.setResizable(false);
    },

    _removeAllLayoutProperties: function()
    {
        this._sidebarElement.style.removeProperty("flexBasis");

        this._mainElement.style.removeProperty("width");
        this._mainElement.style.removeProperty("height");
        this._sidebarElement.style.removeProperty("width");
        this._sidebarElement.style.removeProperty("height");

        this._resizerElement.style.removeProperty("left");
        this._resizerElement.style.removeProperty("right");
        this._resizerElement.style.removeProperty("top");
        this._resizerElement.style.removeProperty("bottom");

        this._resizerElement.style.removeProperty("margin-left");
        this._resizerElement.style.removeProperty("margin-right");
        this._resizerElement.style.removeProperty("margin-top");
        this._resizerElement.style.removeProperty("margin-bottom");
    },

    /**
     * @param {boolean=} animate
     */
    showBoth: function(animate)
    {
        if (this._showMode === WebInspector.SplitWidget.ShowMode.Both)
            animate = false;

        this._cancelAnimation();
        this._mainElement.classList.remove("maximized", "hidden");
        this._sidebarElement.classList.remove("maximized", "hidden");
        this._resizerElement.classList.remove("hidden");
        this.setResizable(true);

        // Make sure main is the first in the children list.
        if (this._sidebarWidget)
            this._sidebarWidget.show(this.element);
        if (this._mainWidget)
            this._mainWidget.show(this.element, this._sidebarWidget ? this._sidebarWidget.element : null);
        // Order widgets in DOM properly.
        this.setSecondIsSidebar(this._secondIsSidebar);

        this._sidebarSizeDIP = -1;
        this._updateShowMode(WebInspector.SplitWidget.ShowMode.Both);
        this._updateLayout(animate);
    },

    /**
     * @param {boolean} resizable
     */
    setResizable: function(resizable)
    {
        this._resizerWidget.setEnabled(resizable);
    },

    /**
     * @return {boolean}
     */
    isResizable: function()
    {
        return this._resizerWidget.isEnabled();
    },

    /**
     * @param {number} size
     */
    setSidebarSize: function(size)
    {
        var sizeDIP = WebInspector.zoomManager.cssToDIP(size);
        this._savedSidebarSizeDIP = sizeDIP;
        this._saveSetting();
        this._innerSetSidebarSizeDIP(sizeDIP, false, true);
    },

    /**
     * @return {number}
     */
    sidebarSize: function()
    {
        var sizeDIP = Math.max(0, this._sidebarSizeDIP);
        return WebInspector.zoomManager.dipToCSS(sizeDIP);
    },

    /**
     * Returns total size in DIP.
     * @return {number}
     */
    _totalSizeDIP: function()
    {
        if (!this._totalSizeCSS) {
            this._totalSizeCSS = this._isVertical ? this.contentElement.offsetWidth : this.contentElement.offsetHeight;
            this._totalSizeOtherDimensionCSS = this._isVertical ? this.contentElement.offsetHeight : this.contentElement.offsetWidth;
        }
        return WebInspector.zoomManager.cssToDIP(this._totalSizeCSS);
    },

    /**
     * @param {string} showMode
     */
    _updateShowMode: function(showMode)
    {
        this._showMode = showMode;
        this._saveShowModeToSettings();
        this._updateShowHideSidebarButton();
        this.dispatchEventToListeners(WebInspector.SplitWidget.Events.ShowModeChanged, showMode);
        this.invalidateConstraints();
    },

    /**
     * @param {number} sizeDIP
     * @param {boolean} animate
     * @param {boolean=} userAction
     */
    _innerSetSidebarSizeDIP: function(sizeDIP, animate, userAction)
    {
        if (this._showMode !== WebInspector.SplitWidget.ShowMode.Both || !this.isShowing())
            return;

        sizeDIP = this._applyConstraints(sizeDIP, userAction);
        if (this._sidebarSizeDIP === sizeDIP)
            return;

        if (!this._resizerElementSize)
            this._resizerElementSize = this._isVertical ? this._resizerElement.offsetWidth : this._resizerElement.offsetHeight;

        // Invalidate layout below.

        this._removeAllLayoutProperties();

        // this._totalSizeDIP is available below since we successfully applied constraints.
        var sidebarSizeValue = WebInspector.zoomManager.dipToCSS(sizeDIP) + "px";
        var mainSizeValue = (this._totalSizeCSS - WebInspector.zoomManager.dipToCSS(sizeDIP)) + "px";
        this._sidebarElement.style.flexBasis = sidebarSizeValue;

        // Make both sides relayout boundaries.
        if (this._isVertical) {
            this._sidebarElement.style.width = sidebarSizeValue;
            this._mainElement.style.width = mainSizeValue;
            this._sidebarElement.style.height = this._totalSizeOtherDimensionCSS + "px";
            this._mainElement.style.height = this._totalSizeOtherDimensionCSS + "px";
        } else {
            this._sidebarElement.style.height = sidebarSizeValue;
            this._mainElement.style.height = mainSizeValue;
            this._sidebarElement.style.width = this._totalSizeOtherDimensionCSS + "px";
            this._mainElement.style.width = this._totalSizeOtherDimensionCSS + "px";
        }

        // Position resizer.
        if (this._isVertical) {
            if (this._secondIsSidebar) {
                this._resizerElement.style.right = sidebarSizeValue;
                this._resizerElement.style.marginRight = -this._resizerElementSize / 2 + "px";
            } else {
                this._resizerElement.style.left = sidebarSizeValue;
                this._resizerElement.style.marginLeft = -this._resizerElementSize / 2 + "px";
            }
        } else {
            if (this._secondIsSidebar) {
                this._resizerElement.style.bottom = sidebarSizeValue;
                this._resizerElement.style.marginBottom = -this._resizerElementSize / 2 + "px";
            } else {
                this._resizerElement.style.top = sidebarSizeValue;
                this._resizerElement.style.marginTop = -this._resizerElementSize / 2 + "px";
            }
        }

        this._sidebarSizeDIP = sizeDIP;

        // Force layout.

        if (animate) {
            this._animate(false);
        } else {
            // No need to recalculate this._sidebarSizeDIP and this._totalSizeDIP again.
            this.doResize();
            this.dispatchEventToListeners(WebInspector.SplitWidget.Events.SidebarSizeChanged, this.sidebarSize());
        }
    },

    /**
     * @param {boolean} reverse
     * @param {function()=} callback
     */
    _animate: function(reverse, callback)
    {
        var animationTime = 50;
        this._animationCallback = callback;

        var animatedMarginPropertyName;
        if (this._isVertical)
            animatedMarginPropertyName = this._secondIsSidebar ? "margin-right" : "margin-left";
        else
            animatedMarginPropertyName = this._secondIsSidebar ? "margin-bottom" : "margin-top";

        var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px";
        var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px" : "0";

        // This order of things is important.
        // 1. Resize main element early and force layout.
        this.contentElement.style.setProperty(animatedMarginPropertyName, marginFrom);
        if (!reverse) {
            suppressUnused(this._mainElement.offsetWidth);
            suppressUnused(this._sidebarElement.offsetWidth);
        }

        // 2. Issue onresize to the sidebar element, its size won't change.
        if (!reverse)
            this._sidebarWidget.doResize();

        // 3. Configure and run animation
        this.contentElement.style.setProperty("transition", animatedMarginPropertyName + " " + animationTime + "ms linear");

        var boundAnimationFrame;
        var startTime;
        /**
         * @this {WebInspector.SplitWidget}
         */
        function animationFrame()
        {
            delete this._animationFrameHandle;

            if (!startTime) {
                // Kick animation on first frame.
                this.contentElement.style.setProperty(animatedMarginPropertyName, marginTo);
                startTime = window.performance.now();
            } else if (window.performance.now() < startTime + animationTime) {
                // Process regular animation frame.
                if (this._mainWidget)
                    this._mainWidget.doResize();
            } else {
                // Complete animation.
                this._cancelAnimation();
                if (this._mainWidget)
                    this._mainWidget.doResize();
                this.dispatchEventToListeners(WebInspector.SplitWidget.Events.SidebarSizeChanged, this.sidebarSize());
                return;
            }
            this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
        }
        boundAnimationFrame = animationFrame.bind(this);
        this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
    },

    _cancelAnimation: function()
    {
        this.contentElement.style.removeProperty("margin-top");
        this.contentElement.style.removeProperty("margin-right");
        this.contentElement.style.removeProperty("margin-bottom");
        this.contentElement.style.removeProperty("margin-left");
        this.contentElement.style.removeProperty("transition");

        if (this._animationFrameHandle) {
            this.contentElement.window().cancelAnimationFrame(this._animationFrameHandle);
            delete this._animationFrameHandle;
        }
        if (this._animationCallback) {
            this._animationCallback();
            delete this._animationCallback;
        }
    },

    /**
     * @param {number} sidebarSize
     * @param {boolean=} userAction
     * @return {number}
     */
    _applyConstraints: function(sidebarSize, userAction)
    {
        var totalSize = this._totalSizeDIP();
        var zoomFactor = this._constraintsInDip ? 1 : WebInspector.zoomManager.zoomFactor();

        var constraints = this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();
        var minSidebarSize = this.isVertical() ? constraints.minimum.width : constraints.minimum.height;
        if (!minSidebarSize)
            minSidebarSize = WebInspector.SplitWidget.MinPadding;
        minSidebarSize *= zoomFactor;
        if (this._sidebarMinimized)
            sidebarSize = minSidebarSize;

        var preferredSidebarSize = this.isVertical() ? constraints.preferred.width : constraints.preferred.height;
        if (!preferredSidebarSize)
            preferredSidebarSize = WebInspector.SplitWidget.MinPadding;
        preferredSidebarSize *= zoomFactor;
        // Allow sidebar to be less than preferred by explicit user action.
        if (sidebarSize < preferredSidebarSize)
            preferredSidebarSize = Math.max(sidebarSize, minSidebarSize);
        preferredSidebarSize += zoomFactor; // 1 css pixel for splitter border.

        constraints = this._mainWidget ? this._mainWidget.constraints() : new Constraints();
        var minMainSize = this.isVertical() ? constraints.minimum.width : constraints.minimum.height;
        if (!minMainSize)
            minMainSize = WebInspector.SplitWidget.MinPadding;
        minMainSize *= zoomFactor;

        var preferredMainSize = this.isVertical() ? constraints.preferred.width : constraints.preferred.height;
        if (!preferredMainSize)
            preferredMainSize = WebInspector.SplitWidget.MinPadding;
        preferredMainSize *= zoomFactor;
        var savedMainSize = this.isVertical() ? this._savedVerticalMainSize : this._savedHorizontalMainSize;
        if (typeof savedMainSize !== "undefined")
            preferredMainSize = Math.min(preferredMainSize, savedMainSize * zoomFactor);
        if (userAction)
            preferredMainSize = minMainSize;

        // Enough space for preferred.
        var totalPreferred = preferredMainSize + preferredSidebarSize;
        if (totalPreferred <= totalSize)
            return Number.constrain(sidebarSize, preferredSidebarSize, totalSize - preferredMainSize);

        // Enough space for minimum.
        if (minMainSize + minSidebarSize <= totalSize) {
            var delta = totalPreferred - totalSize;
            var sidebarDelta = delta * preferredSidebarSize / totalPreferred;
            sidebarSize = preferredSidebarSize - sidebarDelta;
            return Number.constrain(sidebarSize, minSidebarSize, totalSize - minMainSize);
        }

        // Not enough space even for minimum sizes.
        return Math.max(0, totalSize - minMainSize);
    },

    wasShown: function()
    {
        this._forceUpdateLayout();
        WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
    },

    willHide: function()
    {
        WebInspector.zoomManager.removeEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
    },

    onResize: function()
    {
        this._updateLayout();
    },

    onLayout: function()
    {
        this._updateLayout();
    },

    /**
     * @override
     * @return {!Constraints}
     */
    calculateConstraints: function()
    {
        if (this._showMode === WebInspector.SplitWidget.ShowMode.OnlyMain)
            return this._mainWidget ? this._mainWidget.constraints() : new Constraints();
        if (this._showMode === WebInspector.SplitWidget.ShowMode.OnlySidebar)
            return this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();

        var mainConstraints = this._mainWidget ? this._mainWidget.constraints() : new Constraints();
        var sidebarConstraints = this._sidebarWidget ? this._sidebarWidget.constraints() : new Constraints();
        var min = WebInspector.SplitWidget.MinPadding;
        if (this._isVertical) {
            mainConstraints = mainConstraints.widthToMax(min).addWidth(1); // 1 for splitter
            sidebarConstraints = sidebarConstraints.widthToMax(min);
            return mainConstraints.addWidth(sidebarConstraints).heightToMax(sidebarConstraints);
        } else {
            mainConstraints = mainConstraints.heightToMax(min).addHeight(1); // 1 for splitter
            sidebarConstraints = sidebarConstraints.heightToMax(min);
            return mainConstraints.widthToMax(sidebarConstraints).addHeight(sidebarConstraints);
        }
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _onResizeStart: function(event)
    {
        this._resizeStartSizeDIP = this._sidebarSizeDIP;
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _onResizeUpdate: function(event)
    {
        var offset = event.data.currentPosition - event.data.startPosition;
        var offsetDIP = WebInspector.zoomManager.cssToDIP(offset);
        var newSizeDIP = this._secondIsSidebar ? this._resizeStartSizeDIP - offsetDIP : this._resizeStartSizeDIP + offsetDIP;
        var constrainedSizeDIP = this._applyConstraints(newSizeDIP, true);
        this._savedSidebarSizeDIP = constrainedSizeDIP;
        this._saveSetting();
        this._innerSetSidebarSizeDIP(constrainedSizeDIP, false, true);
        if (this.isVertical())
            this._savedVerticalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP;
        else
            this._savedHorizontalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP;
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _onResizeEnd: function(event)
    {
        delete this._resizeStartSizeDIP;
    },

    hideDefaultResizer: function()
    {
        this.uninstallResizer(this._resizerElement);
    },

    /**
     * @param {!Element} resizerElement
     */
    installResizer: function(resizerElement)
    {
        this._resizerWidget.addElement(resizerElement);
    },

    /**
     * @param {!Element} resizerElement
     */
    uninstallResizer: function(resizerElement)
    {
        this._resizerWidget.removeElement(resizerElement);
    },

    /**
     * @return {boolean}
     */
    hasCustomResizer: function()
    {
        var elements = this._resizerWidget.elements();
        return elements.length > 1 || (elements.length === 1 && elements[0] !== this._resizerElement);
    },

    /**
     * @param {!Element} resizer
     * @param {boolean} on
     */
    toggleResizer: function(resizer, on)
    {
        if (on)
            this.installResizer(resizer);
        else
            this.uninstallResizer(resizer);
    },

    /**
     * @return {?WebInspector.SplitWidget.SettingForOrientation}
     */
    _settingForOrientation: function()
    {
        var state = this._setting ? this._setting.get() : {};
        return this._isVertical ? state.vertical : state.horizontal;
    },

    /**
     * @return {number}
     */
    _preferredSidebarSizeDIP: function()
    {
        var size = this._savedSidebarSizeDIP;
        if (!size) {
            size = this._isVertical ? this._defaultSidebarWidth : this._defaultSidebarHeight;
            // If we have default value in percents, calculate it on first use.
            if (0 < size && size < 1)
                size *= this._totalSizeDIP();
        }
        return size;
    },

    _restoreSidebarSizeFromSettings: function()
    {
        var settingForOrientation = this._settingForOrientation();
        this._savedSidebarSizeDIP = settingForOrientation ? settingForOrientation.size : 0;
    },

    _restoreAndApplyShowModeFromSettings: function()
    {
        var orientationState = this._settingForOrientation();
        this._savedShowMode = orientationState && orientationState.showMode ? orientationState.showMode : this._showMode;
        this._showMode = this._savedShowMode;

        switch (this._savedShowMode) {
        case WebInspector.SplitWidget.ShowMode.Both:
            this.showBoth();
            break;
        case WebInspector.SplitWidget.ShowMode.OnlyMain:
            this.hideSidebar();
            break;
        case WebInspector.SplitWidget.ShowMode.OnlySidebar:
            this.hideMain();
            break;
        }
    },

    _saveShowModeToSettings: function()
    {
        this._savedShowMode = this._showMode;
        this._saveSetting();
    },

    _saveSetting: function()
    {
        if (!this._setting)
            return;
        var state = this._setting.get();
        var orientationState = (this._isVertical ? state.vertical : state.horizontal) || {};

        orientationState.size = this._savedSidebarSizeDIP;
        if (this._shouldSaveShowMode)
            orientationState.showMode = this._savedShowMode;

        if (this._isVertical)
            state.vertical = orientationState;
        else
            state.horizontal = orientationState;
        this._setting.set(state);
    },

    _forceUpdateLayout: function()
    {
        // Force layout even if sidebar size does not change.
        this._sidebarSizeDIP = -1;
        this._updateLayout();
    },

    /**
     * @param {!WebInspector.Event} event
     */
    _onZoomChanged: function(event)
    {
        this._forceUpdateLayout();
    },

    /**
     * @param {string} title
     * @param {string=} className
     * @return {!Element}
     */
    displayShowHideSidebarButton: function(title, className)
    {
        console.assert(this.isVertical(), "Buttons for split widget with horizontal split are not supported yet.");

        this._showHideSidebarButtonTitle = WebInspector.UIString(title);
        this._showHideSidebarButton = this._mainElement.createChild("button", "sidebar-show-hide-button " + (className || ""));
        this._showHideSidebarButton.addEventListener("click", buttonClicked.bind(this), false);
        this._updateShowHideSidebarButton();

        /**
         * @param {!Event} event
         * @this {WebInspector.SplitWidget}
         */
        function buttonClicked(event)
        {
            if (this._showMode !== WebInspector.SplitWidget.ShowMode.Both)
                this.showBoth(true);
            else
                this.hideSidebar(true);
        }

        return this._showHideSidebarButton;
    },

    _updateShowHideSidebarButton: function()
    {
        if (!this._showHideSidebarButton)
            return;
        var sidebarHidden = this._showMode === WebInspector.SplitWidget.ShowMode.OnlyMain;
        this._showHideSidebarButton.classList.toggle("toggled-show", sidebarHidden);
        this._showHideSidebarButton.classList.toggle("toggled-hide", !sidebarHidden);
        this._showHideSidebarButton.classList.toggle("top-sidebar-show-hide-button", !this.isVertical() && !this.isSidebarSecond());
        this._showHideSidebarButton.classList.toggle("right-sidebar-show-hide-button", this.isVertical() && this.isSidebarSecond());
        this._showHideSidebarButton.classList.toggle("bottom-sidebar-show-hide-button", !this.isVertical() && this.isSidebarSecond());
        this._showHideSidebarButton.classList.toggle("left-sidebar-show-hide-button", this.isVertical() && !this.isSidebarSecond());
        this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIString("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s", this._showHideSidebarButtonTitle);
    },

    __proto__: WebInspector.Widget.prototype
}
