Web Inspector: TabBar redesign: TabBarItem close button is incorrectly positioned
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Feb 2018 20:59:55 +0000 (20:59 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Feb 2018 20:59:55 +0000 (20:59 +0000)
https://bugs.webkit.org/show_bug.cgi?id=182844
<rdar://problem/37586749>

Reviewed by Timothy Hatcher.

* UserInterface/Views/GeneralTabBarItem.js:
(WI.GeneralTabBarItem.prototype.set title):
Insert the title before the last flexible space item.

* UserInterface/Views/TabBar.css:
(.tab-bar > .item):
(.tab-bar > .item > .close):
(.tab-bar > .item > .flex-space):
(.tab-bar > .item.ephemeral > .flex-space:last-child):
(.tab-bar.collapsed > .item):
(.tab-bar.collapsed > .item > .flex-space):
(.tab-bar.collapsed > .item > .close):
(.tab-bar.collapsed > .item:hover > .close):
(.tab-bar.collapsed > .item.ephemeral:hover > .icon):
(.tab-bar > .item:hover > .close): Deleted.
(.tab-bar:not(.collapsed) > .item.ephemeral:hover > .icon): Deleted.

* UserInterface/Views/TabBarItem.js:
(WI.TabBarItem):
Restore flexible space items before and after the icon.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@228573 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js
Source/WebInspectorUI/UserInterface/Views/TabBar.css
Source/WebInspectorUI/UserInterface/Views/TabBarItem.js

index 473535e..ab4ec13 100644 (file)
@@ -1,3 +1,32 @@
+2018-02-16  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: TabBar redesign: TabBarItem close button is incorrectly positioned
+        https://bugs.webkit.org/show_bug.cgi?id=182844
+        <rdar://problem/37586749>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/GeneralTabBarItem.js:
+        (WI.GeneralTabBarItem.prototype.set title):
+        Insert the title before the last flexible space item.
+
+        * UserInterface/Views/TabBar.css:
+        (.tab-bar > .item):
+        (.tab-bar > .item > .close):
+        (.tab-bar > .item > .flex-space):
+        (.tab-bar > .item.ephemeral > .flex-space:last-child):
+        (.tab-bar.collapsed > .item):
+        (.tab-bar.collapsed > .item > .flex-space):
+        (.tab-bar.collapsed > .item > .close):
+        (.tab-bar.collapsed > .item:hover > .close):
+        (.tab-bar.collapsed > .item.ephemeral:hover > .icon):
+        (.tab-bar > .item:hover > .close): Deleted.
+        (.tab-bar:not(.collapsed) > .item.ephemeral:hover > .icon): Deleted.
+
+        * UserInterface/Views/TabBarItem.js:
+        (WI.TabBarItem):
+        Restore flexible space items before and after the icon.
+
 2018-02-14  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Styles: completion popover doesn't hide when switching panels
index 8b33fea..6d3ac07 100644 (file)
@@ -69,7 +69,7 @@ WI.GeneralTabBarItem = class GeneralTabBarItem extends WI.TabBarItem
             titleContentElement.textContent = title;
             this._titleElement.appendChild(titleContentElement);
 
-            this.element.appendChild(this._titleElement);
+            this.element.insertBefore(this._titleElement, this.element.lastChild);
         } else {
             if (this._titleElement)
                 this._titleElement.remove();
index b079a31..17276cb 100644 (file)
@@ -84,7 +84,6 @@ body.window-inactive .tab-bar > .top-border {
 
     z-index: 1;
 
-    justify-content: center;
     align-items: center;
 
     padding: 0 6px;
@@ -192,6 +191,8 @@ body.window-inactive .tab-bar > .item.selected {
     transition-property: background-color, opacity;
     transition-duration: 250ms, 500ms;
     transition-delay: 0, 50ms;
+
+    -webkit-margin-end: 4px;
 }
 
 body:not(.window-inactive) .tab-bar > .item:hover > .close {
@@ -214,6 +215,15 @@ body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .clos
     opacity: 0.8 !important;
 }
 
+.tab-bar > .item > .flex-space {
+    display: flex;
+    flex: 1;
+}
+
+.tab-bar > .item.ephemeral > .flex-space:last-child {
+    -webkit-margin-end: 16px;
+}
+
 .tab-bar > .item > .icon {
     width: 16px;
     height: 16px;
@@ -274,24 +284,29 @@ body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .clos
     color: hsla(0, 0%, 0%, 0.7);
 }
 
+.tab-bar.collapsed > .item {
+    justify-content: center;
+}
+
 .tab-bar.collapsed > .item:not(.pinned) > .icon {
     display: none;
 }
 
-.tab-bar > .item > .close {
+.tab-bar.collapsed > .item > .flex-space {
     display: none;
 }
 
-.tab-bar > .item:hover > .close {
-    display: inline-block;
+.tab-bar.collapsed > .item > .close {
+    display: none;
+    -webkit-margin-end: 0;
 }
 
 .tab-bar.collapsed > .item:hover > .close {
+    display: inline-block;
     position: absolute;
 }
 
-
-.tab-bar:not(.collapsed) > .item.ephemeral:hover > .icon {
+.tab-bar.collapsed > .item.ephemeral:hover > .icon {
     display: none;
 }
 
index 728aaa8..b095f84 100644 (file)
@@ -38,10 +38,14 @@ WI.TabBarItem = class TabBarItem extends WI.Object
         this._element.tabIndex = 0;
         this._element[WI.TabBarItem.ElementReferenceSymbol] = this;
 
+        this._element.createChild("div", "flex-space");
+
         this._iconElement = document.createElement("img");
         this._iconElement.classList.add("icon");
         this._element.appendChild(this._iconElement);
 
+        this._element.createChild("div", "flex-space");
+
         this.title = title;
         this.image = image;
         this.representedObject = representedObject;