Changeset 265118 in webkit

Timestamp:

Jul 30, 2020 4:35:15 PM (4 years ago)

Author:

Devin Rousso

Message:

Web Inspector: only show scrollbars when needed
​https://bugs.webkit.org/show_bug.cgi?id=214980

Reviewed by Brian Burg.

Prefer overflow: auto; instead of overflow: scroll; wherever possible, as when using a
hardware mouse scrollbars are always shown for the latter, even when the content fits.

• UserInterface/Debug/UncaughtExceptionReporter.css:

(.sheet-container):

• UserInterface/Views/AuditTestContentView.css:

(.content-view-container > .content-view.audit-test):

• UserInterface/Views/CanvasOverviewContentView.css:

(.content-view.canvas-overview > .content-view.canvas.saved-recordings .tree-outline):

• UserInterface/Views/CanvasSidebarPanel.css:

(.sidebar > .panel.navigation.canvas.has-recordings > .content > .recording-content):

• UserInterface/Views/DOMEventsBreakdownView.css:

(.waterfall-popover-content .dom-events-breakdown):

• UserInterface/Views/DOMNodeEventsContentView.css:

(.dom-node-details.dom-events):

• UserInterface/Views/GraphicsOverviewContentView.css:

(.content-view.graphics-overview):

• UserInterface/Views/LocalRemoteObjectContentView.css:

(.content-view.local-remote-object):

• UserInterface/Views/NetworkResourceDetailView.css:

(.content-view.resource-details):

• UserInterface/Views/OpenResourceDialog.css:

(.open-resource-dialog > .tree-outline):

• UserInterface/Views/SourceCodeTextEditor.css:

(.popover .debugger-popover-content > .body):

• UserInterface/Views/CPUTimelineView.css:

(.timeline-view.cpu): Added.
(body .timeline-view.cpu): Deleted.

• UserInterface/Views/MemoryTimelineView.css:

(.timeline-view.memory): Added.
(body .timeline-view.memory): Deleted.
Although !important is kind of a "hack", adding body to the selector is more of a "hack"
and is easier to unintentionally break.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Debug/UncaughtExceptionReporter.css (modified) (1 diff)
• UserInterface/Views/AuditTestContentView.css (modified) (1 diff)
• UserInterface/Views/CPUTimelineView.css (modified) (1 diff)
• UserInterface/Views/CanvasOverviewContentView.css (modified) (1 diff)
• UserInterface/Views/CanvasSidebarPanel.css (modified) (1 diff)
• UserInterface/Views/DOMEventsBreakdownView.css (modified) (1 diff)
• UserInterface/Views/DOMNodeEventsContentView.css (modified) (1 diff)
• UserInterface/Views/GraphicsOverviewContentView.css (modified) (1 diff)
• UserInterface/Views/LocalRemoteObjectContentView.css (modified) (1 diff)
• UserInterface/Views/MemoryTimelineView.css (modified) (1 diff)
• UserInterface/Views/NetworkResourceDetailView.css (modified) (1 diff)
• UserInterface/Views/OpenResourceDialog.css (modified) (1 diff)
• UserInterface/Views/SourceCodeTextEditor.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-07-30  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: only show scrollbars when needed
+        https://bugs.webkit.org/show_bug.cgi?id=214980
+
+        Reviewed by Brian Burg.
+
+        Prefer `overflow: auto;` instead of `overflow: scroll;` wherever possible, as when using a
+        hardware mouse scrollbars are always shown for the latter, even when the content fits.
+
+        * UserInterface/Debug/UncaughtExceptionReporter.css:
+        (.sheet-container):
+        * UserInterface/Views/AuditTestContentView.css:
+        (.content-view-container > .content-view.audit-test):
+        * UserInterface/Views/CanvasOverviewContentView.css:
+        (.content-view.canvas-overview > .content-view.canvas.saved-recordings .tree-outline):
+        * UserInterface/Views/CanvasSidebarPanel.css:
+        (.sidebar > .panel.navigation.canvas.has-recordings > .content > .recording-content):
+        * UserInterface/Views/DOMEventsBreakdownView.css:
+        (.waterfall-popover-content .dom-events-breakdown):
+        * UserInterface/Views/DOMNodeEventsContentView.css:
+        (.dom-node-details.dom-events):
+        * UserInterface/Views/GraphicsOverviewContentView.css:
+        (.content-view.graphics-overview):
+        * UserInterface/Views/LocalRemoteObjectContentView.css:
+        (.content-view.local-remote-object):
+        * UserInterface/Views/NetworkResourceDetailView.css:
+        (.content-view.resource-details):
+        * UserInterface/Views/OpenResourceDialog.css:
+        (.open-resource-dialog > .tree-outline):
+        * UserInterface/Views/SourceCodeTextEditor.css:
+        (.popover .debugger-popover-content > .body):
+
+        * UserInterface/Views/CPUTimelineView.css:
+        (.timeline-view.cpu): Added.
+        (body .timeline-view.cpu): Deleted.
+        * UserInterface/Views/MemoryTimelineView.css:
+        (.timeline-view.memory): Added.
+        (body .timeline-view.memory): Deleted.
+        Although `!important` is kind of a "hack", adding `body` to the selector is more of a "hack"
+        and is easier to unintentionally break.
+
 2020-07-28  Brian Burg  <bburg@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css

@@ -32 +32 @@
     z-index: var(--z-index-uncaught-exception-sheet);
     background-color: hsl(0, 0%, 96%);
-    overflow: scroll;
+    overflow: auto;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css

@@ -25 +25 @@
 
 .content-view-container > .content-view.audit-test {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

@@ -24 +24 @@
  */
 
-body .timeline-view.cpu {
-    overflow: scroll;
+.timeline-view.cpu {
+    overflow: auto !important;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

@@ -187 +187 @@
 
 .content-view.canvas-overview > .content-view.canvas.saved-recordings .tree-outline {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css

@@ -50 +50 @@
 .sidebar > .panel.navigation.canvas.has-recordings > .content > .recording-content {
     flex-grow: 1;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMEventsBreakdownView.css

@@ -27 +27 @@
     -webkit-user-select: text;
     max-height: 210px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeEventsContentView.css

@@ -25 +25 @@
 
 .dom-node-details.dom-events {
-    overflow-y: scroll;
+    overflow-y: auto;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css

@@ -26 +26 @@
 .content-view.graphics-overview {
     background-color: var(--background-color-content);
-    overflow-y: scroll;
+    overflow-y: auto;
     padding-bottom: var(--navigation-bar-height);
     background-color: hsl(0, 0%, 90%);

trunk/Source/WebInspectorUI/UserInterface/Views/LocalRemoteObjectContentView.css

@@ -26 +26 @@
 .content-view.local-remote-object {
     padding: 10px;
-    overflow: scroll;
+    overflow: auto;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css

@@ -24 +24 @@
  */
 
-body .timeline-view.memory {
-    overflow: scroll;
+.timeline-view.memory {
+    overflow: auto !important;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css

@@ -32 +32 @@
 
     padding: 12px 20px 0 20px;
-    overflow: scroll;
+    overflow: auto;
 
     -webkit-user-select: text;

trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css

@@ -125 +125 @@
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     border-bottom-left-radius: 4px;

trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css

@@ -151 +151 @@
     padding-top: 2px;
     border-top: 1px solid var(--text-color-quaternary);
-    overflow: scroll;
+    overflow: auto;
 }