Skip to content
Permalink
Browse files
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
  • Loading branch information
LuckyKobold committed Nov 18, 2015
1 parent 3ff8017 commit 6e03221c6364fbeabcd9d925e5bcd994908b660d
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 39 deletions.
@@ -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
Binary file not shown.
@@ -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;
@@ -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;

0 comments on commit 6e03221

Please sign in to comment.