Web Inspector: Elements: the Classes toggle is drawn on top of other content with no other way of scrolling to it
https://bugs.webkit.org/show_bug.cgi?id=204690
Reviewed by Timothy Hatcher.
Use a vertical flexbox for the contents of sidebar panels instead of absolute positioning so
that the variable height Classes "drawer" can have it's own scroll area and doesn't take up
any space from the rest of the panel's contents.
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
(WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content):
(.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content ~ .options-container):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container):
(.sidebar > .panel.details.css-style > .content.has-filter-bar): Deleted.
* UserInterface/Views/Sidebar.css:
(.sidebar > .panel):
(.sidebar > .panel.selected): Deleted.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@253167 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 1a4a2231..c80a850 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,29 @@
2019-12-05 Devin Rousso <drousso@apple.com>
+ Web Inspector: Elements: the Classes toggle is drawn on top of other content with no other way of scrolling to it
+ https://bugs.webkit.org/show_bug.cgi?id=204690
+
+ Reviewed by Timothy Hatcher.
+
+ Use a vertical flexbox for the contents of sidebar panels instead of absolute positioning so
+ that the variable height Classes "drawer" can have it's own scroll area and doesn't take up
+ any space from the rest of the panel's contents.
+
+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
+ (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content):
+ (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container):
+ (.sidebar > .panel.details.css-style > .content.has-filter-bar): Deleted.
+
+ * UserInterface/Views/Sidebar.css:
+ (.sidebar > .panel):
+ (.sidebar > .panel.selected): Deleted.
+
+2019-12-05 Devin Rousso <drousso@apple.com>
+
Web Inspector: Search: there should be some default content when there is no search string
https://bugs.webkit.org/show_bug.cgi?id=204631
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
index 0b141e4..105ee33 100644
--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
@@ -24,17 +24,7 @@
*/
.sidebar > .panel.details.css-style > .content {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: auto;
- overflow-x: hidden;
-}
-
-.sidebar > .panel.details.css-style > .content.has-filter-bar {
- bottom: calc(var(--navigation-bar-height) - 1px);
+ position: relative;
}
.sidebar > .panel.details.css-style > .content > .pseudo-classes {
@@ -65,8 +55,8 @@
.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
display: flex;
+ flex-shrink: 0;
align-items: center;
- position: absolute;
/* Make sure options and class containers are above details section headers, but below popovers. */
z-index: calc(var(--z-index-header) + 1);
width: 100%;
@@ -74,7 +64,6 @@
}
.sidebar > .panel.details.css-style > .content ~ .options-container {
- bottom: 0;
height: calc(var(--console-prompt-min-height) - 1px);
padding-top: 1px;
}
@@ -146,7 +135,6 @@
.sidebar > .panel.details.css-style > .content ~ .class-list-container {
flex-wrap: wrap;
- bottom: calc(var(--console-prompt-min-height) - 1px);
max-height: 75px;
padding: 3px 2px;
background-color: var(--panel-background-color);
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
index 04a5567..8e2959b 100644
--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
@@ -155,6 +155,19 @@
this._showPanel(this._panel);
+ this._classListContainer = this.element.createChild("div", "class-list-container");
+ this._classListContainer.hidden = true;
+
+ this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+ this._addClassContainer.title = WI.UIString("Add a Class");
+ this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+ this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+ this._addClassInput.spellcheck = false;
+ this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
+ this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+ this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
let optionsContainer = this.element.createChild("div", "options-container");
let newRuleButton = optionsContainer.createChild("img", "new-rule");
@@ -172,19 +185,6 @@
this._classToggleButton.title = WI.UIString("Toggle Classes");
this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
- this._classListContainer = this.element.createChild("div", "class-list-container");
- this._classListContainer.hidden = true;
-
- this._addClassContainer = this._classListContainer.createChild("div", "new-class");
- this._addClassContainer.title = WI.UIString("Add a Class");
- this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
-
- this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
- this._addClassInput.spellcheck = false;
- this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
- this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
- this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
-
WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
diff --git a/Source/WebInspectorUI/UserInterface/Views/Sidebar.css b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
index 3ec06c5..bf4ad25 100644
--- a/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
@@ -43,14 +43,13 @@
}
.sidebar > .panel {
+ display: flex;
+ flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-
- display: none;
-
overflow: hidden;
}
@@ -58,10 +57,6 @@
top: var(--navigation-bar-height);
}
-.sidebar > .panel.selected {
- display: block;
-}
-
body[dir=ltr] .sidebar.right > .resizer,
body[dir=rtl] .sidebar.left > .resizer {
left: -3px;
