<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[189815] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/189815">189815</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-09-15 11:26:27 -0700 (Tue, 15 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Closing the final inspector tab should be allowed
https://bugs.webkit.org/show_bug.cgi?id=149130
Patch by Joseph Pecoraro <pecoraro@apple.com> on 2015-09-15
Reviewed by Brian Burg.
Previously we did not allow closing the last inspector tab. Now, we
will allow closing all inspector tabs, and when the last is closed,
present an unclosable New Tab tab, which would then be used to create
a new tab.
* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):
If we have no tabs to restore, show the New Tab tab.
(WebInspector._openDefaultTab):
When the last tab is closed, the tab bar requests we open a default tab.
Open the New Tab tab.
(WebInspector.TabBar.prototype._handleClick):
Disallow closing the single default tab.
(WebInspector._newTabItemClicked):
(WebInspector.showNewTabTab):
Share logic for showing the New Tab tab.
* UserInterface/Views/NewTabContentView.js:
(WebInspector.NewTabContentView):
Mark the new tab's tab bar item as the "default" tab bar item. It gets
special behavior when it is the single normal tab (cannot be closed).
* UserInterface/Views/TabBar.css:
(body:not(.window-inactive) .tab-bar > .item:hover > .close):
(body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .close):
(.tab-bar.single-tab > .item.default-tab > .close):
(body:not(.window-inactive) .tab-bar:not(.single-tab) > .item:not(.hide-close-button):hover > .close): Deleted.
(.tab-bar > .item.hide-close-button > .close): Deleted.
Update styles to only disable the close button on the
"default-tab" when it is the "single-tab" open. Otherwise
always allow closing tabs.
* UserInterface/Views/TabBar.js:
(WebInspector.TabBar.prototype.removeTabBarItem):
(WebInspector.TabBar.prototype.hasNormalTab):
(WebInspector.TabBar.prototype._openDefaultTab):
When removing the last normal tab, send an event to open
the default tab.
* UserInterface/Views/TabBarItem.js:
(WebInspector.TabBarItem.prototype.get default):
(WebInspector.TabBarItem.prototype.get isDefaultTab):
(WebInspector.TabBarItem.prototype.set isDefaultTab):
(WebInspector.TabBarItem.prototype.get hideCloseButton): Deleted.
(WebInspector.TabBarItem.prototype.set hideCloseButton): Deleted.
Switch to marking a tab bar item as the default tab. This tab
will be allowed when it is the single remaining tab. Currently
the default tab is always the "New Tab" tab.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -1,3 +1,62 @@
</span><ins>+2015-09-15 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: Closing the final inspector tab should be allowed
+ https://bugs.webkit.org/show_bug.cgi?id=149130
+
+ Reviewed by Brian Burg.
+
+ Previously we did not allow closing the last inspector tab. Now, we
+ will allow closing all inspector tabs, and when the last is closed,
+ present an unclosable New Tab tab, which would then be used to create
+ a new tab.
+
+ * UserInterface/Base/Main.js:
+ (WebInspector.contentLoaded):
+ If we have no tabs to restore, show the New Tab tab.
+
+ (WebInspector._openDefaultTab):
+ When the last tab is closed, the tab bar requests we open a default tab.
+ Open the New Tab tab.
+
+ (WebInspector.TabBar.prototype._handleClick):
+ Disallow closing the single default tab.
+
+ (WebInspector._newTabItemClicked):
+ (WebInspector.showNewTabTab):
+ Share logic for showing the New Tab tab.
+
+ * UserInterface/Views/NewTabContentView.js:
+ (WebInspector.NewTabContentView):
+ Mark the new tab's tab bar item as the "default" tab bar item. It gets
+ special behavior when it is the single normal tab (cannot be closed).
+
+ * UserInterface/Views/TabBar.css:
+ (body:not(.window-inactive) .tab-bar > .item:hover > .close):
+ (body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .close):
+ (.tab-bar.single-tab > .item.default-tab > .close):
+ (body:not(.window-inactive) .tab-bar:not(.single-tab) > .item:not(.hide-close-button):hover > .close): Deleted.
+ (.tab-bar > .item.hide-close-button > .close): Deleted.
+ Update styles to only disable the close button on the
+ "default-tab" when it is the "single-tab" open. Otherwise
+ always allow closing tabs.
+
+ * UserInterface/Views/TabBar.js:
+ (WebInspector.TabBar.prototype.removeTabBarItem):
+ (WebInspector.TabBar.prototype.hasNormalTab):
+ (WebInspector.TabBar.prototype._openDefaultTab):
+ When removing the last normal tab, send an event to open
+ the default tab.
+
+ * UserInterface/Views/TabBarItem.js:
+ (WebInspector.TabBarItem.prototype.get default):
+ (WebInspector.TabBarItem.prototype.get isDefaultTab):
+ (WebInspector.TabBarItem.prototype.set isDefaultTab):
+ (WebInspector.TabBarItem.prototype.get hideCloseButton): Deleted.
+ (WebInspector.TabBarItem.prototype.set hideCloseButton): Deleted.
+ Switch to marking a tab bar item as the default tab. This tab
+ will be allowed when it is the single remaining tab. Currently
+ the default tab is always the "New Tab" tab.
+
</ins><span class="cx"> 2015-09-15 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: new tab content view should disallow split console
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -212,6 +212,7 @@
</span><span class="cx">
</span><span class="cx"> this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
</span><span class="cx"> this.tabBar.addEventListener(WebInspector.TabBar.Event.NewTabItemClicked, this._newTabItemClicked, this);
</span><ins>+ this.tabBar.addEventListener(WebInspector.TabBar.Event.OpenDefaultTab, this._openDefaultTab, this);
</ins><span class="cx">
</span><span class="cx"> var contentElement = document.getElementById("content");
</span><span class="cx"> contentElement.setAttribute("role", "main");
</span><span class="lines">@@ -371,6 +372,9 @@
</span><span class="cx"> if (!this.tabBar.selectedTabBarItem)
</span><span class="cx"> this.tabBar.selectedTabBarItem = 0;
</span><span class="cx">
</span><ins>+ if (!this.tabBar.hasNormalTab())
+ this.showNewTabTab();
+
</ins><span class="cx"> // Listen to the events after restoring the saved tabs to avoid recursion.
</span><span class="cx"> this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._rememberOpenTabs, this);
</span><span class="cx"> this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._rememberOpenTabs, this);
</span><span class="lines">@@ -469,10 +473,21 @@
</span><span class="cx">
</span><span class="cx"> WebInspector._newTabItemClicked = function(event)
</span><span class="cx"> {
</span><ins>+ const shouldAnimate = true;
+ this.showNewTabTab(shouldAnimate);
+};
+
+WebInspector._openDefaultTab = function(event)
+{
+ this.showNewTabTab();
+};
+
+WebInspector.showNewTabTab = function(shouldAnimate)
+{
</ins><span class="cx"> var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NewTabContentView);
</span><span class="cx"> if (!tabContentView)
</span><span class="cx"> tabContentView = new WebInspector.NewTabContentView;
</span><del>- this.tabBrowser.showTabForContentView(tabContentView);
</del><ins>+ this.tabBrowser.showTabForContentView(tabContentView, !shouldAnimate);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.isNewTabWithTypeAllowed = function(tabType)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -28,6 +28,7 @@
</span><span class="cx"> constructor(identifier)
</span><span class="cx"> {
</span><span class="cx"> var tabBarItem = new WebInspector.TabBarItem("Images/NewTab.svg", WebInspector.UIString("New Tab"));
</span><ins>+ tabBarItem.isDefaultTab = true;
</ins><span class="cx">
</span><span class="cx"> super(identifier || "new-tab", "new-tab", tabBarItem);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -160,12 +160,15 @@
</span><span class="cx"> transition-delay: 0, 50ms;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-body:not(.window-inactive) .tab-bar:not(.single-tab) > .item:not(.hide-close-button):hover > .close {
</del><ins>+body:not(.window-inactive) .tab-bar > .item:hover > .close {
</ins><span class="cx"> opacity: 0.6;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tab-bar.single-tab > .item > .close,
-.tab-bar > .item.hide-close-button > .close {
</del><ins>+body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .close {
+ opacity: 0;
+}
+
+.tab-bar.single-tab > .item.default-tab > .close {
</ins><span class="cx"> pointer-events: none;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -262,12 +265,12 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tab-bar.collapsed:not(.hide-titles) > .item:not(.pinned, .hide-close-button):hover > .icon,
</del><ins>+.tab-bar.collapsed:not(.hide-titles) > .item:not(.pinned, .default-tab):hover > .icon,
</ins><span class="cx"> .tab-bar.hide-titles > .item.selected:hover > .icon {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tab-bar.collapsed:not(.hide-titles) > .item:not(.hide-close-button):hover > .close,
</del><ins>+.tab-bar.collapsed:not(.hide-titles) > .item:not(.default-tab):hover > .close,
</ins><span class="cx"> .tab-bar.hide-titles > .item.selected:hover > .close {
</span><span class="cx"> display: inline-block;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -221,6 +221,10 @@
</span><span class="cx"> var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
</span><span class="cx"> this._element.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
</span><span class="cx">
</span><ins>+ const shouldOpenDefaultTab = !tabBarItem.isDefaultTab && !this.hasNormalTab();
+ if (shouldOpenDefaultTab)
+ doNotAnimate = true;
+
</ins><span class="cx"> if (!hasMoreThanOneNormalTab || wasLastNormalTab || !doNotExpand) {
</span><span class="cx"> if (!doNotAnimate) {
</span><span class="cx"> this._tabAnimatedClosedSinceMouseEnter = true;
</span><span class="lines">@@ -230,6 +234,9 @@
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx">
</span><ins>+ if (shouldOpenDefaultTab)
+ this._openDefaultTab();
+
</ins><span class="cx"> return tabBarItem;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -291,6 +298,9 @@
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx">
</span><ins>+ if (shouldOpenDefaultTab)
+ this._openDefaultTab();
+
</ins><span class="cx"> return tabBarItem;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -430,6 +440,11 @@
</span><span class="cx"> return this._element;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ hasNormalTab()
+ {
+ return this._tabBarItems.some((tab) => !tab.pinned);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _findTabBarItem(tabBarItemOrIndex)
</span><span class="lines">@@ -459,6 +474,11 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _openDefaultTab()
+ {
+ this.dispatchEventToListeners(WebInspector.TabBar.Event.OpenDefaultTab);
+ }
+
</ins><span class="cx"> _recordTabBarItemSizesAndPositions()
</span><span class="cx"> {
</span><span class="cx"> var tabBarItemSizesAndPositions = new Map;
</span><span class="lines">@@ -608,8 +628,13 @@
</span><span class="cx"> const clickedMiddleButton = event.button === 1;
</span><span class="cx">
</span><span class="cx"> var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
</span><del>- if (closeButtonElement || clickedMiddleButton)
</del><ins>+ if (closeButtonElement || clickedMiddleButton) {
+ // Disallow closing the default tab if it is the only tab.
+ if (tabBarItem.isDefaultTab && this._element.classList.contains("single-tab"))
+ return;
+
</ins><span class="cx"> this.removeTabBarItem(tabBarItem, false, true);
</span><ins>+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _handleMouseMoved(event)
</span><span class="lines">@@ -755,5 +780,6 @@
</span><span class="cx"> TabBarItemAdded: "tab-bar-tab-bar-item-added",
</span><span class="cx"> TabBarItemRemoved: "tab-bar-tab-bar-item-removed",
</span><span class="cx"> TabBarItemsReordered: "tab-bar-tab-bar-items-reordered",
</span><del>- NewTabItemClicked: "tab-bar-new-tab-item-clicked"
</del><ins>+ NewTabItemClicked: "tab-bar-new-tab-item-clicked",
+ OpenDefaultTab: "tab-bar-open-default-tab"
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js (189814 => 189815)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2015-09-15 18:18:03 UTC (rev 189814)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2015-09-15 18:26:27 UTC (rev 189815)
</span><span class="lines">@@ -119,14 +119,14 @@
</span><span class="cx"> this._element.classList.toggle("disabled", disabled);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get hideCloseButton()
</del><ins>+ get isDefaultTab()
</ins><span class="cx"> {
</span><del>- return this._element.classList.contains("hide-close-button");
</del><ins>+ return this._element.classList.contains("default-tab");
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- set hideCloseButton(hide)
</del><ins>+ set isDefaultTab(isDefaultTab)
</ins><span class="cx"> {
</span><del>- this._element.classList.toggle("hide-close-button", hide);
</del><ins>+ this._element.classList.toggle("default-tab", isDefaultTab);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get pinned()
</span></span></pre>
</div>
</div>
</body>
</html>