Title: [228573] trunk/Source/WebInspectorUI
- Revision
- 228573
- Author
- [email protected]
- Date
- 2018-02-16 12:59:55 -0800 (Fri, 16 Feb 2018)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (228572 => 228573)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-02-16 20:43:28 UTC (rev 228572)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-02-16 20:59:55 UTC (rev 228573)
@@ -1,3 +1,32 @@
+2018-02-16 Matt Baker <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: Styles: completion popover doesn't hide when switching panels
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js (228572 => 228573)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js 2018-02-16 20:43:28 UTC (rev 228572)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js 2018-02-16 20:59:55 UTC (rev 228573)
@@ -69,7 +69,7 @@
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();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (228572 => 228573)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2018-02-16 20:43:28 UTC (rev 228572)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2018-02-16 20:59:55 UTC (rev 228573)
@@ -84,7 +84,6 @@
z-index: 1;
- justify-content: center;
align-items: center;
padding: 0 6px;
@@ -192,6 +191,8 @@
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 @@
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 @@
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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js (228572 => 228573)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2018-02-16 20:43:28 UTC (rev 228572)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js 2018-02-16 20:59:55 UTC (rev 228573)
@@ -38,10 +38,14 @@
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;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
