DevTools: extract classes from BreakpointsSidebarPane.js

Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js

+// Copyright (c) 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @extends {WebInspector.BreakpointsSidebarPaneBase}
+ * @implements {WebInspector.TargetManager.Observer}
+ */
+WebInspector.XHRBreakpointsSidebarPane = function()
+{
+    WebInspector.BreakpointsSidebarPaneBase.call(this, WebInspector.UIString("XHR Breakpoints"));
+
+    /** @type {!Map.<string, !Element>} */
+    this._breakpointElements = new Map();
+
+    var addButton = this.titleElement.createChild("button", "pane-title-button add");
+    addButton.title = WebInspector.UIString("Add XHR breakpoint");
+    addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
+
+    this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
+
+    WebInspector.targetManager.observeTargets(this);
+}
+
+WebInspector.XHRBreakpointsSidebarPane.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        this._restoreBreakpoints(target);
+    },
+
+    /**
+     * @override
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target) { },
+
+    _emptyElementContextMenu: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^breakpoint"), this._addButtonClicked.bind(this));
+        contextMenu.show();
+    },
+
+    _addButtonClicked: function(event)
+    {
+        if (event)
+            event.consume();
+
+        this.expand();
+
+        var inputElementContainer = createElementWithClass("p", "breakpoint-condition");
+        inputElementContainer.textContent = WebInspector.UIString("Break when URL contains:");
+
+        var inputElement = inputElementContainer.createChild("span", "editing");
+        inputElement.id = "breakpoint-condition-input";
+        this.addListElement(inputElementContainer, /** @type {?Element} */ (this.listElement.firstChild));
+
+        /**
+         * @param {boolean} accept
+         * @param {!Element} e
+         * @param {string} text
+         * @this {WebInspector.XHRBreakpointsSidebarPane}
+         */
+        function finishEditing(accept, e, text)
+        {
+            this.removeListElement(inputElementContainer);
+            if (accept) {
+                this._setBreakpoint(text, true);
+                this._saveBreakpoints();
+            }
+        }
+
+        var config = new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
+        WebInspector.InplaceEditor.startEditing(inputElement, config);
+    },
+
+    /**
+     * @param {string} url
+     * @param {boolean} enabled
+     * @param {!WebInspector.Target=} target
+     */
+    _setBreakpoint: function(url, enabled, target)
+    {
+        if (enabled)
+            this._updateBreakpointOnTarget(url, true, target);
+
+        if (this._breakpointElements.has(url))
+            return;
+
+        var element = createElement("li");
+        element._url = url;
+        element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true);
+
+        var label = createCheckboxLabel(undefined, enabled);
+        label.classList.add("checkbox-elem");
+        element.appendChild(label);
+        label.checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false);
+        element._checkboxElement = label.checkboxElement;
+
+        var labelElement = label.createChild("span", "cursor-auto");
+        if (!url)
+            labelElement.textContent = WebInspector.UIString("Any XHR");
+        else
+            labelElement.textContent = WebInspector.UIString("URL contains \"%s\"", url);
+        labelElement.addEventListener("dblclick", this._labelClicked.bind(this, url), false);
+
+        var currentElement = /** @type {?Element} */ (this.listElement.firstChild);
+        while (currentElement) {
+            if (currentElement._url && currentElement._url < element._url)
+                break;
+            currentElement = /** @type {?Element} */ (currentElement.nextSibling);
+        }
+        this.addListElement(element, currentElement);
+        this._breakpointElements.set(url, element);
+    },
+
+    /**
+     * @param {string} url
+     * @param {!WebInspector.Target=} target
+     */
+    _removeBreakpoint: function(url, target)
+    {
+        var element = this._breakpointElements.get(url);
+        if (!element)
+            return;
+
+        this.removeListElement(element);
+        this._breakpointElements.delete(url);
+        if (element._checkboxElement.checked)
+            this._updateBreakpointOnTarget(url, false, target);
+    },
+
+    /**
+     * @param {string} url
+     * @param {boolean} enable
+     * @param {!WebInspector.Target=} target
+     */
+    _updateBreakpointOnTarget: function(url, enable, target)
+    {
+        var targets = target ? [target] : WebInspector.targetManager.targets();
+        for (var i = 0; i < targets.length; ++i) {
+            if (enable)
+                targets[i].domdebuggerAgent().setXHRBreakpoint(url);
+            else
+                targets[i].domdebuggerAgent().removeXHRBreakpoint(url);
+        }
+    },
+
+    _contextMenu: function(url, event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+
+        /**
+         * @this {WebInspector.XHRBreakpointsSidebarPane}
+         */
+        function removeBreakpoint()
+        {
+            this._removeBreakpoint(url);
+            this._saveBreakpoints();
+        }
+
+        /**
+         * @this {WebInspector.XHRBreakpointsSidebarPane}
+         */
+        function removeAllBreakpoints()
+        {
+            for (var url of this._breakpointElements.keys())
+                this._removeBreakpoint(url);
+            this._saveBreakpoints();
+        }
+        var removeAllTitle = WebInspector.UIString.capitalize("Remove ^all ^breakpoints");
+
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^breakpoint"), this._addButtonClicked.bind(this));
+        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint.bind(this));
+        contextMenu.appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
+        contextMenu.show();
+    },
+
+    _checkboxClicked: function(url, event)
+    {
+        this._updateBreakpointOnTarget(url, event.target.checked);
+        this._saveBreakpoints();
+    },
+
+    _labelClicked: function(url)
+    {
+        var element = this._breakpointElements.get(url);
+        var inputElement = createElementWithClass("span", "breakpoint-condition editing");
+        inputElement.textContent = url;
+        this.listElement.insertBefore(inputElement, element);
+        element.classList.add("hidden");
+
+        /**
+         * @param {boolean} accept
+         * @param {!Element} e
+         * @param {string} text
+         * @this {WebInspector.XHRBreakpointsSidebarPane}
+         */
+        function finishEditing(accept, e, text)
+        {
+            this.removeListElement(inputElement);
+            if (accept) {
+                this._removeBreakpoint(url);
+                this._setBreakpoint(text, element._checkboxElement.checked);
+                this._saveBreakpoints();
+            } else
+                element.classList.remove("hidden");
+        }
+
+        WebInspector.InplaceEditor.startEditing(inputElement, new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false)));
+    },
+
+    highlightBreakpoint: function(url)
+    {
+        var element = this._breakpointElements.get(url);
+        if (!element)
+            return;
+        this.expand();
+        element.classList.add("breakpoint-hit");
+        this._highlightedElement = element;
+    },
+
+    clearBreakpointHighlight: function()
+    {
+        if (this._highlightedElement) {
+            this._highlightedElement.classList.remove("breakpoint-hit");
+            delete this._highlightedElement;
+        }
+    },
+
+    _saveBreakpoints: function()
+    {
+        var breakpoints = [];
+        for (var url of this._breakpointElements.keys())
+            breakpoints.push({ url: url, enabled: this._breakpointElements.get(url)._checkboxElement.checked });
+        WebInspector.settings.xhrBreakpoints.set(breakpoints);
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    _restoreBreakpoints: function(target)
+    {
+        var breakpoints = WebInspector.settings.xhrBreakpoints.get();
+        for (var i = 0; i < breakpoints.length; ++i) {
+            var breakpoint = breakpoints[i];
+            if (breakpoint && typeof breakpoint.url === "string")
+                this._setBreakpoint(breakpoint.url, breakpoint.enabled, target);
+        }
+    },
+
+    __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
+}