Web Inspector: Watch Expressions details section should use Navigatio…

…nBar

https://bugs.webkit.org/show_bug.cgi?id=151377

Reviewed by Timothy Hatcher.

Replaces image elements with a NavigationBar instance. The refresh and
clear buttons are disabled if no watch expressions exist.

* Localizations/en.lproj/localizedStrings.js:
New navigation item labels.

* UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
(.details-section.watch-expressions .options > *): Deleted.
(.details-section.watch-expressions .options > *:active): Deleted.
(.details-section.watch-expressions .options > .watch-expression-add): Deleted.
(.details-section.watch-expressions .options > .watch-expression-clear): Deleted.
(.details-section.watch-expressions .options > .watch-expression-refresh): Deleted.
Remove <img> button styles.

* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpressionButtonClicked.presentPopoverOverTargetElement):
Use the navigation item element.
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._updateWatchExpressionsNavigationBar):
Enable/disable refresh and clear buttons.


Canonical link: https://commits.webkit.org/169554@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@192584 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,31 @@
+2015-11-18  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Watch Expressions details section should use NavigationBar
+        https://bugs.webkit.org/show_bug.cgi?id=151377
+
+        Reviewed by Timothy Hatcher.
+
+        Replaces image elements with a NavigationBar instance. The refresh and 
+        clear buttons are disabled if no watch expressions exist.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New navigation item labels.
+
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
+        (.details-section.watch-expressions .options > *): Deleted.
+        (.details-section.watch-expressions .options > *:active): Deleted.
+        (.details-section.watch-expressions .options > .watch-expression-add): Deleted.
+        (.details-section.watch-expressions .options > .watch-expression-clear): Deleted.
+        (.details-section.watch-expressions .options > .watch-expression-refresh): Deleted.
+        Remove <img> button styles.
+
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpressionButtonClicked.presentPopoverOverTargetElement):
+        Use the navigation item element.
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._updateWatchExpressionsNavigationBar):
+        Enable/disable refresh and clear buttons.
+
 2015-11-17  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Move Timeline creation into a recording

Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css

@@ -23,29 +23,6 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.details-section.watch-expressions .options > * {
-    float: right;
-    margin-top: 1px;
-    margin-left: 5px;
-    height: 13px;
-}
-
-.details-section.watch-expressions .options > *:active {
-    opacity: 0.7;
-}
-
-.details-section.watch-expressions .options > .watch-expression-add {
-    content: url(../Images/Plus13.svg);
-}
-
-.details-section.watch-expressions .options > .watch-expression-clear {
-    content: url(../Images/NavigationItemTrash.svg);
-}
-
-.details-section.watch-expressions .options > .watch-expression-refresh {
-    content: url(../Images/ReloadFull.svg);
-}
-
 .popover .watch-expression {
     padding: 5px;
     margin: 2px;

Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js

@@ -32,32 +32,32 @@ WebInspector.ScopeChainDetailsSidebarPanel = class ScopeChainDetailsSidebarPanel
         this._callFrame = null;
 
         this._watchExpressionsSetting = new WebInspector.Setting("watch-expressions", []);
+        this._watchExpressionsSetting.addEventListener(WebInspector.Setting.Event.Changed, this._updateWatchExpressionsNavigationBar, this);
 
         this._watchExpressionOptionsElement = document.createElement("div");
         this._watchExpressionOptionsElement.classList.add("options");
 
-        let refreshAllWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement("img"));
-        refreshAllWatchExpressionButton.classList.add("watch-expression-refresh");
-        refreshAllWatchExpressionButton.setAttribute("role", "button");
-        refreshAllWatchExpressionButton.title = WebInspector.UIString("Refresh All Watch Expressions");
-        refreshAllWatchExpressionButton.addEventListener("click", this._refreshAllWatchExpressionsButtonClicked.bind(this));
+        this._navigationBar = new WebInspector.NavigationBar;
+        this._watchExpressionOptionsElement.appendChild(this._navigationBar.element);
 
-        let clearAllWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement("img"));
-        clearAllWatchExpressionButton.classList.add("watch-expression-clear");
-        clearAllWatchExpressionButton.setAttribute("role", "button");
-        clearAllWatchExpressionButton.title = WebInspector.UIString("Clear All Watch Expressions");
-        clearAllWatchExpressionButton.addEventListener("click", this._clearAllWatchExpressionsButtonClicked.bind(this));
+        let addWatchExpressionButton = new WebInspector.ButtonNavigationItem("add-watch-expression", WebInspector.UIString("Add watch expression"), "Images/Plus13.svg", 13, 13);
+        addWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._addWatchExpressionButtonClicked, this);
+        this._navigationBar.addNavigationItem(addWatchExpressionButton);
 
-        let addWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement("img"));
-        addWatchExpressionButton.classList.add("watch-expression-add");
-        addWatchExpressionButton.title = WebInspector.UIString("Add Watch Expression");
-        addWatchExpressionButton.setAttribute("role", "button");
-        addWatchExpressionButton.addEventListener("click", this._addWatchExpressionButtonClicked.bind(this));
+        this._clearAllWatchExpressionButton = new WebInspector.ButtonNavigationItem("clear-watch-expressions", WebInspector.UIString("Clear watch expressions"), "Images/CloseLarge.svg", 13, 13);
+        this._clearAllWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearAllWatchExpressionsButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._clearAllWatchExpressionButton);
+
+        this._refreshAllWatchExpressionButton = new WebInspector.ButtonNavigationItem("refresh-watch-expressions", WebInspector.UIString("Refresh watch expressions"), "Images/ReloadFull.svg", 13, 13);
+        this._refreshAllWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._refreshAllWatchExpressionsButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._refreshAllWatchExpressionButton);
 
         this._watchExpressionsSectionGroup = new WebInspector.DetailsSectionGroup;
         this._watchExpressionsSection = new WebInspector.DetailsSection("watch-expressions", WebInspector.UIString("Watch Expressions"), [this._watchExpressionsSectionGroup], this._watchExpressionOptionsElement);
         this.contentElement.appendChild(this._watchExpressionsSection.element);
 
+        this._updateWatchExpressionsNavigationBar();
+
         this.needsRefresh();
 
         // Update on console prompt eval as objects in the scope chain may have changed.
@@ -304,7 +304,7 @@ WebInspector.ScopeChainDetailsSidebarPanel = class ScopeChainDetailsSidebarPanel
     {
         function presentPopoverOverTargetElement()
         {
-            let target = WebInspector.Rect.rectFromClientRect(event.target.getBoundingClientRect());
+            let target = WebInspector.Rect.rectFromClientRect(event.target.element.getBoundingClientRect());
             popover.present(target, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
         }
 
@@ -449,6 +449,13 @@ WebInspector.ScopeChainDetailsSidebarPanel = class ScopeChainDetailsSidebarPanel
 
         WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.delete(propertyPathIdentifier);
     }
+
+    _updateWatchExpressionsNavigationBar()
+    {
+        let enabled = this._watchExpressionsSetting.value.length;
+        this._refreshAllWatchExpressionButton.enabled = enabled;
+        this._clearAllWatchExpressionButton.enabled = enabled;
+    }
 };
 
 WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties = new Set;