DevTools: migrate sources panel sidebar to views.

third_party/WebKit/Source/devtools/front_end/sources/JavaScriptBreakpointsSidebarPane.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.SimpleView}
- * @param {!WebInspector.BreakpointManager} breakpointManager
- * @param {function(!WebInspector.UISourceCode, number=, number=, boolean=)} showSourceLineDelegate
+ * @extends {WebInspector.VBox}
+ * @implements {WebInspector.ContextFlavorListener}
  */
-WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, showSourceLineDelegate)
+WebInspector.JavaScriptBreakpointsSidebarPane = function()
 {
-    WebInspector.SimpleView.call(this, WebInspector.UIString("Breakpoints"));
+    WebInspector.VBox.call(this);
     this.registerRequiredCSS("components/breakpointsList.css");
 
-    this._breakpointManager = breakpointManager;
-    this._showSourceLineDelegate = showSourceLineDelegate;
+    this._breakpointManager = WebInspector.breakpointManager;
 
-    this.listElement = createElementWithClass("ol", "breakpoint-list");
+    this._listElement = createElementWithClass("ol", "breakpoint-list");
 
     this.emptyElement = this.element.createChild("div", "gray-info-message");
     this.emptyElement.textContent = WebInspector.UIString("No Breakpoints");
 
     this._items = new Map();
 
     var breakpointLocations = this._breakpointManager.allBreakpointLocations();
     for (var i = 0; i < breakpointLocations.length; ++i)
         this._addBreakpoint(breakpointLocations[i].breakpoint, breakpointLocations[i].uiLocation);
 
     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
 
     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
+    WebInspector.breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
+    this._breakpointsActiveStateChanged();
+    this._update();
 }
 
 WebInspector.JavaScriptBreakpointsSidebarPane.prototype = {
     _emptyElementContextMenu: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         this._appendBreakpointActiveItem(contextMenu);
         contextMenu.show();
     },
 
@@ skipping 51 matching lines @@
                 var maxSnippetLength = 200;
                 var snippetStartIndex = columnNumber > 100 ? columnNumber : 0;
                 snippetElement.textContent = lineText.substr(snippetStartIndex).trimEnd(maxSnippetLength);
             }
             this.didReceiveBreakpointLineForTest(uiLocation.uiSourceCode);
         }
 
         uiLocation.uiSourceCode.requestContent().then(didRequestContent.bind(this));
 
         element._data = uiLocation;
-        var currentElement = this.listElement.firstChild;
+        var currentElement = this._listElement.firstChild;
         while (currentElement) {
             if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0)
                 break;
             currentElement = currentElement.nextSibling;
         }
         this._addListElement(element, currentElement);
 
         var breakpointItem = { element: element, checkbox: checkboxLabel.checkboxElement };
         this._items.set(breakpoint, breakpointItem);
     },
@@ skipping 12 matching lines @@
     {
         var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
         var breakpointItem = this._items.get(breakpoint);
         if (!breakpointItem)
             return;
         this._items.remove(breakpoint);
         this._removeListElement(breakpointItem.element);
     },
 
     /**
-     * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
+     * @override
+     * @param {?Object} object
      */
-    highlightBreakpoint: function(breakpoint)
+    flavorChanged: function(object)
     {
+        this._update();
+    },
+
+    _update: function()
+    {
+        var details = WebInspector.context.flavor(WebInspector.DebuggerPausedDetails);
+        var uiLocation = details && details.callFrames.length ? WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) : null;
+        var breakpoint = uiLocation ? WebInspector.breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : null;

[dgozman, 2016/08/15 21:31:03]

Either this._breakpointManager or WI.breakpointManager everywhere.

         var breakpointItem = this._items.get(breakpoint);
-        if (!breakpointItem)
+        if (!breakpointItem) {
+            if (this._highlightedBreakpointItem) {
+                this._highlightedBreakpointItem.element.classList.remove("breakpoint-hit");
+                delete this._highlightedBreakpointItem;
+            }
             return;
+        }
+
         breakpointItem.element.classList.add("breakpoint-hit");
         this._highlightedBreakpointItem = breakpointItem;
-        this.revealView();
+        WebInspector.viewManager.revealViewWithWidget(this);
     },
 
-    clearBreakpointHighlight: function()
+    _breakpointsActiveStateChanged: function()
     {
-        if (this._highlightedBreakpointItem) {
-            this._highlightedBreakpointItem.element.classList.remove("breakpoint-hit");
-            delete this._highlightedBreakpointItem;
-        }
+        this._listElement.classList.toggle("breakpoints-list-deactivated", !WebInspector.breakpointManager.breakpointsActive());
     },
 
     _breakpointClicked: function(uiLocation, event)
     {
-        this._showSourceLineDelegate(uiLocation.uiSourceCode, uiLocation.lineNumber);
+        WebInspector.Revealer.reveal(uiLocation);

[dgozman, 2016/08/15 21:31:03]

Inline it.

     },
 
     /**
      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
      * @param {!Event} event
      */
     _breakpointCheckboxClicked: function(breakpoint, event)
     {
         // Breakpoint element has it's own click handler.
         event.consume();
@@ skipping 36 matching lines @@
             contextMenu.appendItem(enableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, true), !(enableBreakpointCount !== breakpoints.length));
             contextMenu.appendItem(disableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, false), !(enableBreakpointCount > 1));
         }
 
         contextMenu.show();
     },
 
     _addListElement: function(element, beforeElement)
     {
         if (beforeElement)
-            this.listElement.insertBefore(element, beforeElement);
+            this._listElement.insertBefore(element, beforeElement);
         else {
-            if (!this.listElement.firstChild) {
+            if (!this._listElement.firstChild) {
                 this.element.removeChild(this.emptyElement);
-                this.element.appendChild(this.listElement);
+                this.element.appendChild(this._listElement);
             }
-            this.listElement.appendChild(element);
+            this._listElement.appendChild(element);
         }
     },
 
     _removeListElement: function(element)
     {
-        this.listElement.removeChild(element);
-        if (!this.listElement.firstChild) {
-            this.element.removeChild(this.listElement);
+        this._listElement.removeChild(element);
+        if (!this._listElement.firstChild) {
+            this.element.removeChild(this._listElement);
             this.element.appendChild(this.emptyElement);
         }
     },
 
     _compare: function(x, y)
     {
         if (x !== y)
             return x < y ? -1 : 1;
         return 0;
     },
 
     _compareBreakpoints: function(b1, b2)
     {
         return this._compare(b1.uiSourceCode.url(), b2.uiSourceCode.url()) || this._compare(b1.lineNumber, b2.lineNumber);
     },
 
     reset: function()
     {
-        this.listElement.removeChildren();
-        if (this.listElement.parentElement) {
-            this.element.removeChild(this.listElement);
+        this._listElement.removeChildren();
+        if (this._listElement.parentElement) {
+            this.element.removeChild(this._listElement);
             this.element.appendChild(this.emptyElement);
         }
         this._items.clear();
     },
 
-    __proto__: WebInspector.SimpleView.prototype
+    __proto__: WebInspector.VBox.prototype
 }