Title: [198065] trunk/Source/WebInspectorUI
- Revision
- 198065
- Author
- [email protected]
- Date
- 2016-03-12 10:16:32 -0800 (Sat, 12 Mar 2016)
Log Message
Web Inspector: Convert toolbar and tab bar to position absolute to reduce repaint areas
https://bugs.webkit.org/show_bug.cgi?id=155386
Reviewed by Timothy Hatcher.
Using CSS flexbox causes unnecessary large repaints.
Convert top level elements (.toolbar, .tab-bar, #main)
from flexbox to "position: absolute".
* UserInterface/Views/Main.css:
(#main):
* UserInterface/Views/TabBar.css:
(.tab-bar):
* UserInterface/Views/Toolbar.css:
(.toolbar):
(body.mac-platform:not(.docked, .mavericks) .toolbar):
(body.mac-platform:not(.docked, .mavericks)):
(body.window-inactive:not(.mavericks) .toolbar): Deleted.
* UserInterface/Views/Variables.css:
(:root):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (198064 => 198065)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-12 17:30:41 UTC (rev 198064)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-12 18:16:32 UTC (rev 198065)
@@ -1,3 +1,26 @@
+2016-03-12 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Convert toolbar and tab bar to position absolute to reduce repaint areas
+ https://bugs.webkit.org/show_bug.cgi?id=155386
+
+ Reviewed by Timothy Hatcher.
+
+ Using CSS flexbox causes unnecessary large repaints.
+ Convert top level elements (.toolbar, .tab-bar, #main)
+ from flexbox to "position: absolute".
+
+ * UserInterface/Views/Main.css:
+ (#main):
+ * UserInterface/Views/TabBar.css:
+ (.tab-bar):
+ * UserInterface/Views/Toolbar.css:
+ (.toolbar):
+ (body.mac-platform:not(.docked, .mavericks) .toolbar):
+ (body.mac-platform:not(.docked, .mavericks)):
+ (body.window-inactive:not(.mavericks) .toolbar): Deleted.
+ * UserInterface/Views/Variables.css:
+ (:root):
+
2016-03-11 Matt Baker <[email protected]>
Web Inspector: Wrong TimelineOverview height after switching from Events to Frames
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (198064 => 198065)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2016-03-12 17:30:41 UTC (rev 198064)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2016-03-12 18:16:32 UTC (rev 198065)
@@ -28,9 +28,6 @@
}
body {
- display: flex;
- flex-direction: column;
-
font-family: -apple-system, sans-serif;
font-size: 11px;
@@ -118,14 +115,17 @@
}
#main {
+ position: absolute;
+ top: calc(var(--toolbar-height) + var(--tab-bar-height));
+ left: 0;
+ right: 0;
+ bottom: 0;
+
display: flex;
- flex: 1;
- min-height: 0;
background-color: white;
/* The position and z-index are needed to make negative z-index work in the DOM tree. */
- position: relative;
z-index: 0;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (198064 => 198065)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2016-03-12 17:30:41 UTC (rev 198064)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css 2016-03-12 18:16:32 UTC (rev 198065)
@@ -24,19 +24,21 @@
*/
.tab-bar {
+ position: absolute;
+ top: var(--toolbar-height);
+ left: 0;
+ right: 0;
+ height: var(--tab-bar-height);
+
display: flex;
justify-content: space-between;
flex-wrap: wrap;
- position: relative;
-
border-bottom: 1px solid hsl(0, 0%, 65%);
background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
background-size: 100% 200%;
- height: 24px;
-
white-space: nowrap;
overflow: hidden;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css (198064 => 198065)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2016-03-12 17:30:41 UTC (rev 198064)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2016-03-12 18:16:32 UTC (rev 198065)
@@ -24,16 +24,20 @@
*/
.toolbar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--toolbar-height);
+
display: flex;
+ padding-top: 3px;
+ padding-bottom: 3px;
white-space: nowrap;
overflow: hidden;
outline: none;
-
- padding-top: 3px;
- padding-bottom: 3px;
- height: 36px;
}
body:not(.mavericks) .toolbar,
@@ -49,9 +53,12 @@
body.mac-platform:not(.docked, .mavericks) .toolbar {
padding-top: 21px;
- height: 54px;
}
+body.mac-platform:not(.docked, .mavericks) {
+ --toolbar-height: 54px;
+}
+
.toolbar .control-section {
display: flex;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (198064 => 198065)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-03-12 17:30:41 UTC (rev 198064)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2016-03-12 18:16:32 UTC (rev 198065)
@@ -69,6 +69,9 @@
--memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
--memory-extra-fill-color: hsl(211, 53%, 70%);
--memory-extra-stroke-color: hsl(211, 53%, 55%);
+
+ --toolbar-height: 36px;
+ --tab-bar-height: 24px;
}
body.window-inactive {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
