Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 07 Aug 2019 15:43:49 +0000
changeset 486775 c80eb9715805a4e5690dbede3c5081b73528dead
parent 486774 6ec4bd94bb511e3f73f6f290c30e463e6ce740ee
child 486776 1000e07a1b1ad57c483f2f9a6910ff2faa7feac9
push id91930
push usernchevobbe@mozilla.com
push dateWed, 07 Aug 2019 15:44:58 +0000
treeherderautoland@c80eb9715805 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1571349
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes. We were adding a before pseudo element on message hover, which was causing reflows (which are quite expansive in console). We fix this by always rendering a before pseudo element, only changing its background color on hover. Differential Revision: https://phabricator.services.mozilla.com/D40590
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -130,27 +130,32 @@ a {
  * it when scrolling console content), so remove the last item's border. */
 .webconsole-app:not(.jsterm-editor) .message:last-child {
   border-bottom-width: 0;
 }
 
 /*
  * Show a blue border on the left side of rows on hover. Avoid using border
  * properties because the top/bottom borders would not span the full width.
+ * We always place an empty before pseudo element in order to avoid costly reflows on 
+ * hover (See Bug 1571349).
  */
-.message:hover::before {
+.message::before {
   content: "";
   position: absolute;
   inset-inline: 0;
   top: 0;
   bottom: 0;
-  background: var(--theme-highlight-blue);
   width: 3px;
 }
 
+.message:hover::before {
+  background-color: var(--theme-highlight-blue);
+}
+
 /*
  * By default, prevent any element in message to overflow.
  * We exclude network messages as it may cause issues in the network detail panel.
  * This makes console reflows faster (See Bug 1487457).
  */
 .message:not(.network) * {
   overflow: hidden;
 }