DevTools: reformat front-end code to match chromium style.

third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
index d4c7042de7fd176bc4ae6b874201f19977690e8e..1e0d9b97993cbe2a8bf091494b2c4cfbc747e2c9 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -27,401 +27,384 @@
  * (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.BreakpointsSidebarPaneBase}
  * @implements {WebInspector.ContextFlavorListener}
+ * @unrestricted
  */
-WebInspector.DOMBreakpointsSidebarPane = function()
-{
-    WebInspector.BreakpointsSidebarPaneBase.call(this);
-    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
-    this.listElement.classList.add("dom-breakpoints-list");
+WebInspector.DOMBreakpointsSidebarPane = class extends WebInspector.BreakpointsSidebarPaneBase {
+  constructor() {
+    super();
+    this._domBreakpointsSetting = WebInspector.settings.createLocalSetting('domBreakpoints', []);
+    this.listElement.classList.add('dom-breakpoints-list');
 
     /** @type {!Map<string, !Element>} */
     this._breakpointElements = new Map();
 
-    WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.targetManager.addModelListener(
+        WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
     this._update();
-};
-
-WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes = {
-    SubtreeModified: "subtree-modified",
-    AttributeModified: "attribute-modified",
-    NodeRemoved: "node-removed"
-};
-
-WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels = {
-    "subtree-modified": WebInspector.UIString("Subtree Modified"),
-    "attribute-modified": WebInspector.UIString("Attribute Modified"),
-    "node-removed": WebInspector.UIString("Node Removed")
-};
-
-WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns = {
-    "subtree-modified": WebInspector.UIString("subtree modifications"),
-    "attribute-modified": WebInspector.UIString("attribute modifications"),
-    "node-removed": WebInspector.UIString("node removal")
-};
-
-WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
-
-WebInspector.DOMBreakpointsSidebarPane.prototype = {
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!WebInspector.ContextMenu} contextMenu
-     * @param {boolean} createSubMenu
-     */
-    populateNodeContextMenu: function(node, contextMenu, createSubMenu)
-    {
-        if (node.pseudoType())
-            return;
-
-        var nodeBreakpoints = this._nodeBreakpoints(node);
-
-        /**
-         * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
-         */
-        function toggleBreakpoint(type)
-        {
-            if (!nodeBreakpoints.has(type))
-                this._setBreakpoint(node, type, true);
-            else
-                this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
-        }
-
-        var breakpointsMenu = createSubMenu ? contextMenu.appendSubMenuItem(WebInspector.UIString("Break on...")) : contextMenu;
-        for (var key in WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes) {
-            var type = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes[key];
-            var label = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[type];
-            breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints.has(type));
-        }
-    },
+  }
+
+  /**
+   * @param {!WebInspector.DebuggerPausedDetails} details
+   * @return {!Element}
+   */
+  static createBreakpointHitMessage(details) {
+    var messageWrapper = createElement('span');
+    var mainElement = messageWrapper.createChild('div', 'status-main');
+    var auxData = /** @type {!Object} */ (details.auxData);
+    mainElement.textContent =
+        String.sprintf('Paused on %s', WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[auxData['type']]);
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {!Set<!DOMDebuggerAgent.DOMBreakpointType>}
-     */
-    _nodeBreakpoints: function(node)
-    {
-        /** @type {!Set<!DOMDebuggerAgent.DOMBreakpointType>} */
-        var nodeBreakpoints = new Set();
-        for (var element of this._breakpointElements.values()) {
-            if (element._node === node && element._checkboxElement.checked)
-                nodeBreakpoints.add(element._type);
-        }
-        return nodeBreakpoints;
-    },
+    var domModel = WebInspector.DOMModel.fromTarget(details.target());
+    if (domModel) {
+      var subElement = messageWrapper.createChild('div', 'status-sub monospace');
+      var node = domModel.nodeForId(auxData['nodeId']);
+      var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+      subElement.appendChild(linkifiedNode);
+
+      var targetNode = auxData['targetNodeId'] ? domModel.nodeForId(auxData['targetNodeId']) : null;
+      var targetNodeLink = targetNode ? WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode) : '';
+      var message;
+      if (auxData.type === WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified) {
+        if (auxData['insertion'])
+          message = targetNode === node ? 'Child %s added' : 'Descendant %s added';
+        else
+          message = 'Descendant %s removed';
+        subElement.appendChild(createElement('br'));
+        subElement.appendChild(WebInspector.formatLocalized(message, [targetNodeLink]));
+      }
+    }
+    return messageWrapper;
+  }
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {boolean}
-     */
-    hasBreakpoints: function(node)
-    {
-        for (var element of this._breakpointElements.values()) {
-            if (element._node === node && element._checkboxElement.checked)
-                return true;
-        }
-        return false;
-    },
-
-    _nodeRemoved: function(event)
-    {
-        var node = event.data.node;
-        this._removeBreakpointsForNode(event.data.node);
-        var children = node.children();
-        if (!children)
-            return;
-        for (var i = 0; i < children.length; ++i)
-            this._removeBreakpointsForNode(children[i]);
-        this._saveBreakpoints();
-    },
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!WebInspector.ContextMenu} contextMenu
+   * @param {boolean} createSubMenu
+   */
+  populateNodeContextMenu(node, contextMenu, createSubMenu) {
+    if (node.pseudoType())
+      return;
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     */
-    _removeBreakpointsForNode: function(node)
-    {
-        for (var element of this._breakpointElements.values()) {
-            if (element._node === node)
-                this._removeBreakpoint(element._node, element._type);
-        }
-    },
+    var nodeBreakpoints = this._nodeBreakpoints(node);
 
     /**
-     * @param {!WebInspector.DOMNode} node
      * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     * @param {boolean} enabled
+     * @this {WebInspector.DOMBreakpointsSidebarPane}
      */
-    _setBreakpoint: function(node, type, enabled)
-    {
-        var breakpointId = this._createBreakpointId(node.id, type);
-        var breakpointElement = this._breakpointElements.get(breakpointId);
-        if (!breakpointElement) {
-            breakpointElement = this._createBreakpointElement(node, type, enabled);
-            this._breakpointElements.set(breakpointId, breakpointElement);
-        } else {
-            breakpointElement._checkboxElement.checked = enabled;
-        }
-        if (enabled)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
-    },
+    function toggleBreakpoint(type) {
+      if (!nodeBreakpoints.has(type))
+        this._setBreakpoint(node, type, true);
+      else
+        this._removeBreakpoint(node, type);
+      this._saveBreakpoints();
+    }
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     * @param {boolean} enabled
-     */
-    _createBreakpointElement: function(node, type, enabled)
-    {
-        var element = createElement("li");
-        element._node = node;
-        element._type = type;
-        element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
-
-        var checkboxLabel = createCheckboxLabel("", enabled);
-        var checkboxElement = checkboxLabel.checkboxElement;
-        checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
-        element._checkboxElement = checkboxElement;
-        element.appendChild(checkboxLabel);
-
-        var labelElement = createElementWithClass("div", "dom-breakpoint");
-        element.appendChild(labelElement);
-
-        var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        linkifiedNode.classList.add("monospace");
-        linkifiedNode.style.display = "block";
-        labelElement.appendChild(linkifiedNode);
-
-        var description = createElement("div");
-        description.textContent = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels[type];
-        labelElement.appendChild(description);
-
-        var currentElement = this.listElement.firstChild;
-        while (currentElement) {
-            if (currentElement._type && currentElement._type < element._type)
-                break;
-            currentElement = currentElement.nextSibling;
-        }
-        this.addListElement(element, currentElement);
-        return element;
-    },
-
-    _removeAllBreakpoints: function()
-    {
-        for (var element of this._breakpointElements.values())
-            this._removeBreakpoint(element._node, element._type);
-        this._saveBreakpoints();
-    },
+    var breakpointsMenu =
+        createSubMenu ? contextMenu.appendSubMenuItem(WebInspector.UIString('Break on...')) : contextMenu;
+    for (var key in WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes) {
+      var type = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes[key];
+      var label = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[type];
+      breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints.has(type));
+    }
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @return {!Set<!DOMDebuggerAgent.DOMBreakpointType>}
+   */
+  _nodeBreakpoints(node) {
+    /** @type {!Set<!DOMDebuggerAgent.DOMBreakpointType>} */
+    var nodeBreakpoints = new Set();
+    for (var element of this._breakpointElements.values()) {
+      if (element._node === node && element._checkboxElement.checked)
+        nodeBreakpoints.add(element._type);
+    }
+    return nodeBreakpoints;
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @return {boolean}
+   */
+  hasBreakpoints(node) {
+    for (var element of this._breakpointElements.values()) {
+      if (element._node === node && element._checkboxElement.checked)
+        return true;
+    }
+    return false;
+  }
+
+  _nodeRemoved(event) {
+    var node = event.data.node;
+    this._removeBreakpointsForNode(event.data.node);
+    var children = node.children();
+    if (!children)
+      return;
+    for (var i = 0; i < children.length; ++i)
+      this._removeBreakpointsForNode(children[i]);
+    this._saveBreakpoints();
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   */
+  _removeBreakpointsForNode(node) {
+    for (var element of this._breakpointElements.values()) {
+      if (element._node === node)
+        this._removeBreakpoint(element._node, element._type);
+    }
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   * @param {boolean} enabled
+   */
+  _setBreakpoint(node, type, enabled) {
+    var breakpointId = this._createBreakpointId(node.id, type);
+    var breakpointElement = this._breakpointElements.get(breakpointId);
+    if (!breakpointElement) {
+      breakpointElement = this._createBreakpointElement(node, type, enabled);
+      this._breakpointElements.set(breakpointId, breakpointElement);
+    } else {
+      breakpointElement._checkboxElement.checked = enabled;
+    }
+    if (enabled)
+      node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
+    node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, true);
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   * @param {boolean} enabled
+   */
+  _createBreakpointElement(node, type, enabled) {
+    var element = createElement('li');
+    element._node = node;
+    element._type = type;
+    element.addEventListener('contextmenu', this._contextMenu.bind(this, node, type), true);
+
+    var checkboxLabel = createCheckboxLabel('', enabled);
+    var checkboxElement = checkboxLabel.checkboxElement;
+    checkboxElement.addEventListener('click', this._checkboxClicked.bind(this, node, type), false);
+    element._checkboxElement = checkboxElement;
+    element.appendChild(checkboxLabel);
+
+    var labelElement = createElementWithClass('div', 'dom-breakpoint');
+    element.appendChild(labelElement);
+
+    var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+    linkifiedNode.classList.add('monospace');
+    linkifiedNode.style.display = 'block';
+    labelElement.appendChild(linkifiedNode);
+
+    var description = createElement('div');
+    description.textContent = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels[type];
+    labelElement.appendChild(description);
+
+    var currentElement = this.listElement.firstChild;
+    while (currentElement) {
+      if (currentElement._type && currentElement._type < element._type)
+        break;
+      currentElement = currentElement.nextSibling;
+    }
+    this.addListElement(element, currentElement);
+    return element;
+  }
+
+  _removeAllBreakpoints() {
+    for (var element of this._breakpointElements.values())
+      this._removeBreakpoint(element._node, element._type);
+    this._saveBreakpoints();
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   */
+  _removeBreakpoint(node, type) {
+    var breakpointId = this._createBreakpointId(node.id, type);
+    var element = this._breakpointElements.get(breakpointId);
+    if (!element)
+      return;
+
+    this.removeListElement(element);
+    this._breakpointElements.delete(breakpointId);
+    if (element._checkboxElement.checked)
+      node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
+    node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, this.hasBreakpoints(node) ? true : null);
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   * @param {!Event} event
+   */
+  _contextMenu(node, type, event) {
+    var contextMenu = new WebInspector.ContextMenu(event);
 
     /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+     * @this {WebInspector.DOMBreakpointsSidebarPane}
      */
-    _removeBreakpoint: function(node, type)
-    {
-        var breakpointId = this._createBreakpointId(node.id, type);
-        var element = this._breakpointElements.get(breakpointId);
-        if (!element)
-            return;
-
-        this.removeListElement(element);
-        this._breakpointElements.delete(breakpointId);
-        if (element._checkboxElement.checked)
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        node.setMarker(WebInspector.DOMBreakpointsSidebarPane.Marker, this.hasBreakpoints(node) ? true : null);
-    },
+    function removeBreakpoint() {
+      this._removeBreakpoint(node, type);
+      this._saveBreakpoints();
+    }
+    contextMenu.appendItem(WebInspector.UIString.capitalize('Remove ^breakpoint'), removeBreakpoint.bind(this));
+    contextMenu.appendItem(
+        WebInspector.UIString.capitalize('Remove ^all DOM breakpoints'), this._removeAllBreakpoints.bind(this));
+    contextMenu.show();
+  }
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   * @param {!Event} event
+   */
+  _checkboxClicked(node, type, event) {
+    if (event.target.checked)
+      node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
+    else
+      node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
+    this._saveBreakpoints();
+  }
+
+  /**
+   * @override
+   * @param {?Object} object
+   */
+  flavorChanged(object) {
+    this._update();
+  }
+
+  _update() {
+    var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
+    if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) {
+      if (this._highlightedElement) {
+        this._highlightedElement.classList.remove('breakpoint-hit');
+        delete this._highlightedElement;
+      }
+      return;
+    }
+    var auxData = details.auxData;
+    var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
+    var element = this._breakpointElements.get(breakpointId);
+    if (!element)
+      return;
+    WebInspector.viewManager.showView('sources.domBreakpoints');
+    element.classList.add('breakpoint-hit');
+    this._highlightedElement = element;
+  }
+
+  /**
+   * @param {number} nodeId
+   * @param {!DOMDebuggerAgent.DOMBreakpointType} type
+   */
+  _createBreakpointId(nodeId, type) {
+    return nodeId + ':' + type;
+  }
+
+  _saveBreakpoints() {
+    var breakpoints = [];
+    var storedBreakpoints = this._domBreakpointsSetting.get();
+    for (var i = 0; i < storedBreakpoints.length; ++i) {
+      var breakpoint = storedBreakpoints[i];
+      if (breakpoint.url !== this._inspectedURL)
+        breakpoints.push(breakpoint);
+    }
+    for (var element of this._breakpointElements.values())
+      breakpoints.push({
+        url: this._inspectedURL,
+        path: element._node.path(),
+        type: element._type,
+        enabled: element._checkboxElement.checked
+      });
+    this._domBreakpointsSetting.set(breakpoints);
+  }
+
+  /**
+   * @param {!WebInspector.DOMDocument} domDocument
+   */
+  restoreBreakpoints(domDocument) {
+    this._breakpointElements.clear();
+    this.reset();
+    this._inspectedURL = domDocument.documentURL;
+    var domModel = domDocument.domModel();
+    /** @type {!Map<string, !Array<!Object>>} */
+    var pathToBreakpoints = new Map();
 
     /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     * @param {!Event} event
+     * @param {string} path
+     * @param {?DOMAgent.NodeId} nodeId
+     * @this {WebInspector.DOMBreakpointsSidebarPane}
      */
-    _contextMenu: function(node, type, event)
-    {
-        var contextMenu = new WebInspector.ContextMenu(event);
-
-        /**
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
-         */
-        function removeBreakpoint()
-        {
-            this._removeBreakpoint(node, type);
-            this._saveBreakpoints();
-        }
-        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint.bind(this));
-        contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^all DOM breakpoints"), this._removeAllBreakpoints.bind(this));
-        contextMenu.show();
-    },
+    function didPushNodeByPathToFrontend(path, nodeId) {
+      var node = nodeId ? domModel.nodeForId(nodeId) : null;
+      if (!node)
+        return;
+
+      var breakpoints = pathToBreakpoints.get(path);
+      for (var i = 0; i < breakpoints.length; ++i)
+        this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
+    }
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     * @param {!Event} event
-     */
-    _checkboxClicked: function(node, type, event)
-    {
-        if (event.target.checked)
-            node.target().domdebuggerAgent().setDOMBreakpoint(node.id, type);
-        else
-            node.target().domdebuggerAgent().removeDOMBreakpoint(node.id, type);
-        this._saveBreakpoints();
-    },
+    var breakpoints = this._domBreakpointsSetting.get();
+    for (var i = 0; i < breakpoints.length; ++i) {
+      var breakpoint = breakpoints[i];
+      if (breakpoint.url !== this._inspectedURL)
+        continue;
+      var path = breakpoint.path;
+      if (!pathToBreakpoints.has(path)) {
+        pathToBreakpoints.set(path, []);
+        domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
+      }
+      pathToBreakpoints.get(path).push(breakpoint);
+    }
+  }
+};
 
-    /**
-     * @override
-     * @param {?Object} object
-     */
-    flavorChanged: function(object)
-    {
-        this._update();
-    },
-
-    _update: function()
-    {
-        var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
-        if (!details || details.reason !== WebInspector.DebuggerModel.BreakReason.DOM) {
-            if (this._highlightedElement) {
-                this._highlightedElement.classList.remove("breakpoint-hit");
-                delete this._highlightedElement;
-            }
-            return;
-        }
-        var auxData = details.auxData;
-        var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
-        var element = this._breakpointElements.get(breakpointId);
-        if (!element)
-            return;
-        WebInspector.viewManager.showView("sources.domBreakpoints");
-        element.classList.add("breakpoint-hit");
-        this._highlightedElement = element;
-    },
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes = {
+  SubtreeModified: 'subtree-modified',
+  AttributeModified: 'attribute-modified',
+  NodeRemoved: 'node-removed'
+};
 
-    /**
-     * @param {number} nodeId
-     * @param {!DOMDebuggerAgent.DOMBreakpointType} type
-     */
-    _createBreakpointId: function(nodeId, type)
-    {
-        return nodeId + ":" + type;
-    },
-
-    _saveBreakpoints: function()
-    {
-        var breakpoints = [];
-        var storedBreakpoints = this._domBreakpointsSetting.get();
-        for (var i = 0; i < storedBreakpoints.length; ++i) {
-            var breakpoint = storedBreakpoints[i];
-            if (breakpoint.url !== this._inspectedURL)
-                breakpoints.push(breakpoint);
-        }
-        for (var element of this._breakpointElements.values())
-            breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
-        this._domBreakpointsSetting.set(breakpoints);
-    },
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels = {
+  'subtree-modified': WebInspector.UIString('Subtree Modified'),
+  'attribute-modified': WebInspector.UIString('Attribute Modified'),
+  'node-removed': WebInspector.UIString('Node Removed')
+};
 
-    /**
-     * @param {!WebInspector.DOMDocument} domDocument
-     */
-    restoreBreakpoints: function(domDocument)
-    {
-        this._breakpointElements.clear();
-        this.reset();
-        this._inspectedURL = domDocument.documentURL;
-        var domModel = domDocument.domModel();
-        /** @type {!Map<string, !Array<!Object>>} */
-        var pathToBreakpoints = new Map();
-
-        /**
-         * @param {string} path
-         * @param {?DOMAgent.NodeId} nodeId
-         * @this {WebInspector.DOMBreakpointsSidebarPane}
-         */
-        function didPushNodeByPathToFrontend(path, nodeId)
-        {
-            var node = nodeId ? domModel.nodeForId(nodeId) : null;
-            if (!node)
-                return;
-
-            var breakpoints = pathToBreakpoints.get(path);
-            for (var i = 0; i < breakpoints.length; ++i)
-                this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
-        }
-
-        var breakpoints = this._domBreakpointsSetting.get();
-        for (var i = 0; i < breakpoints.length; ++i) {
-            var breakpoint = breakpoints[i];
-            if (breakpoint.url !== this._inspectedURL)
-                continue;
-            var path = breakpoint.path;
-            if (!pathToBreakpoints.has(path)) {
-                pathToBreakpoints.set(path, []);
-                domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
-            }
-            pathToBreakpoints.get(path).push(breakpoint);
-        }
-    },
-
-    __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns = {
+  'subtree-modified': WebInspector.UIString('subtree modifications'),
+  'attribute-modified': WebInspector.UIString('attribute modifications'),
+  'node-removed': WebInspector.UIString('node removal')
 };
 
-/**
- * @param {!WebInspector.DebuggerPausedDetails} details
- * @return {!Element}
- */
-WebInspector.DOMBreakpointsSidebarPane.createBreakpointHitMessage = function(details)
-{
-    var messageWrapper = createElement("span");
-    var mainElement = messageWrapper.createChild("div", "status-main");
-    var auxData = /** @type {!Object} */ (details.auxData);
-    mainElement.textContent = String.sprintf("Paused on %s", WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[auxData["type"]]);
+WebInspector.DOMBreakpointsSidebarPane.Marker = 'breakpoint-marker';
 
-    var domModel = WebInspector.DOMModel.fromTarget(details.target());
-    if (domModel) {
-        var subElement = messageWrapper.createChild("div", "status-sub monospace");
-        var node = domModel.nodeForId(auxData["nodeId"]);
-        var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        subElement.appendChild(linkifiedNode);
-
-        var targetNode = auxData["targetNodeId"] ? domModel.nodeForId(auxData["targetNodeId"]) : null;
-        var targetNodeLink = targetNode ? WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode) : "";
-        var message;
-        if (auxData.type === WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes.SubtreeModified) {
-            if (auxData["insertion"])
-                message = targetNode === node ? "Child %s added" : "Descendant %s added";
-            else
-                message = "Descendant %s removed";
-            subElement.appendChild(createElement("br"));
-            subElement.appendChild(WebInspector.formatLocalized(message, [targetNodeLink]));
-        }
-    }
-    return messageWrapper;
-};
 
 /**
- * @constructor
- * @extends {WebInspector.VBox}
+ * @unrestricted
  */
-WebInspector.DOMBreakpointsSidebarPane.Proxy = function()
-{
-    WebInspector.VBox.call(this);
-    this.registerRequiredCSS("components/breakpointsList.css");
-};
-
-WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
-    wasShown: function()
-    {
-        WebInspector.SimpleView.prototype.wasShown.call(this);
-        var pane = WebInspector.domBreakpointsSidebarPane;
-        if (pane.element.parentNode !== this.element)
-            pane.show(this.element);
-    },
-
-    __proto__: WebInspector.VBox.prototype
+WebInspector.DOMBreakpointsSidebarPane.Proxy = class extends WebInspector.VBox {
+  constructor() {
+    super();
+    this.registerRequiredCSS('components/breakpointsList.css');
+  }
+
+  /**
+   * @override
+   */
+  wasShown() {
+    super.wasShown();
+    var pane = WebInspector.domBreakpointsSidebarPane;
+    if (pane.element.parentNode !== this.element)
+      pane.show(this.element);
+  }
 };
 
 /**