Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes a=RyanVM
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 07 Aug 2019 15:43:49 +0000
changeset 541874 48cb377f63cf6de0221656201a1f867ad5ba5440
parent 541873 1b6a325b60bae842ccd150ba96c02ce7349a7666
child 541875 70aa6961b410e14b94220824d48d6ed00ad21c6c
push id11761
push userarchaeopteryx@coole-files.de
push dateMon, 12 Aug 2019 17:04:06 +0000
treeherdermozilla-beta@37a5c968f336 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, RyanVM
bugs1571349
milestone69.0
Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes a=RyanVM 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;
 }