diff --git a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/node-info.fxml b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/node-info.fxml
index 144fe6a347..f4f35fc3a0 100644
--- a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/node-info.fxml
+++ b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/node-info.fxml
@@ -14,6 +14,7 @@
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.control.ToggleButton?>
+<?import javafx.scene.control.Tooltip?>
 <TabPane fx:id="nodeInfoTabPane" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="300.0" side="LEFT" stylesheets="@../css/designer.css" tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="net.sourceforge.pmd.util.fxdesigner.NodeInfoPanelController">
 
     <tabs>
@@ -30,7 +31,10 @@
                                 AnchorPane.rightAnchor="0.0"
                                 AnchorPane.topAnchor="0.0">
                             <toolbarItems>
-                                <ToggleButton fx:id="hideCommonAttributesToggle" text="Hide common attributes" selected="true" styleClass="icon-button" mnemonicParsing="false">
+                                <ToggleButton fx:id="hideCommonAttributesToggle" selected="true" styleClass="icon-button" mnemonicParsing="false">
+                                    <tooltip>
+                                        <Tooltip text="Hide common attributes" />
+                                    </tooltip>
                                     <graphic>
                                         <FontIcon iconLiteral="fas-eye-slash" />
                                     </graphic>
diff --git a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/xpath.fxml b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/xpath.fxml
index d7716eed92..54590b816d 100644
--- a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/xpath.fxml
+++ b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/xpath.fxml
@@ -65,7 +65,9 @@
                                            AnchorPane.rightAnchor="0.0"
                                            AnchorPane.topAnchor="0.0">
                             <toolbarItems>
+                                <!-- For some reason setting "text", even if it's not displayed, makes the padding of the icon work properly -->
                                 <MenuButton mnemonicParsing="false"
+                                            text="spacer"
                                             styleClass="menu-button-no-arrow,icon-button"
                                             fx:id="xpathVersionMenuButton">
                                     <graphic>
@@ -93,7 +95,7 @@
                                     <tooltip>
                                         <Tooltip>
                                             <text>
-                                                <String fx:value="Export XPath to XML rule" />
+                                                <String fx:value="Export XPath to XML rule..." />
                                             </text>
                                         </Tooltip>
                                     </tooltip>
diff --git a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/constants.less b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/constants.less
index f0bae62c17..e27e43350f 100644
--- a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/constants.less
+++ b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/constants.less
@@ -21,8 +21,11 @@
 
 */
 
-// This is repeated to use it from Less
-// Prefer using it over -fx-base
+// This is repeated to use it from Less and fix the default values
+// Important difference:
+// * @foo is resolved at compile-time by Less
+// * -foo is looked-up at runtime by the CSS engine. So it can't be used with Less
+//   compile-time functions, which will fail.
 @fx-base: #ececec;
 @fx-text-fill: ladder(
         -fx-color,
@@ -31,6 +34,7 @@
         -fx-dark-text-color 59%,
         -fx-mid-text-color 60%);
 
+// TODO simplify that
 // Base colors for background slates
 @app-base-color: darken(@fx-base, 4%);
 @app-darker-slate-color: darken(@fx-base, 14%);
@@ -46,6 +50,14 @@
 @normal-font-size: 10pt;
 @smaller-font-size: 9pt;
 
+.root {
+
+  /* A light grey that is the base color for objects.  Instead of using
+   * -fx-base directly, the sections in this file will typically use -fx-color.
+   */
+  -fx-base: @app-base-color;
+}
+
 // mixin to fix the width of a component
 .fix-width(@width) {
   -fx-pref-width: @width;
diff --git a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/designer.less b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/designer.less
index 72cb2ca57c..0ed95b9e2c 100644
--- a/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/designer.less
+++ b/pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/designer.less
@@ -162,6 +162,12 @@
     }
 }
 
+.titled-pane > .title:hover {
+  // modena uses the rule -fx-color: -fx-hover-base;
+  // which causes an obnoxious flickering
+  -fx-color: -fx-base;
+}
+
 // Supports the ToolbarTitledPane
 .titled-pane.tool-bar-title > .title {
 
@@ -214,7 +220,10 @@
 .icon-button {
 
   -fx-background-color: transparent;
+
+  -fx-content-display: CENTER;
   -fx-border-width: 0;
+  -fx-background-insets: 0;
   -fx-border-insets: 0;
   .force-square(24);
 
@@ -222,12 +231,10 @@
     -fx-graphic-text-gap: 0;
   }
 
-  &.menu-button, &.toggle-button {
-    .ikonli-font-icon {
+  &.menu-button .ikonli-font-icon {
     // Fixes a bug where the cog icon is misplaced to the right
     // Probably needs to be synced with icon size
-    -fx-translate-x: -4;
-    }
+    -fx-translate-x: -3;
   }
 
   .ikonli-font-icon, .svg-icon {
@@ -235,47 +242,30 @@
   }
 
   &.toggle-button:selected {
-    -fx-background-color: -fx-shadow-highlight-color,
-    linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
-    linear-gradient(to bottom,
-            derive(-fx-color, -22%) 0%,
-            derive(-fx-color, -13%) 20%,
-            derive(-fx-color, -11%) 50%);
 
-    -fx-background-insets: 0 0 -1 0, 0, 1;
-  }
+    &, &:focused {
 
+      @grad: linear-gradient(to bottom,
+      derive(-fx-color, -22%) 0%,
+      derive(-fx-color, -13%) 20%,
+      derive(-fx-color, -11%) 50%);
 
-  .toggle-button-background(@base) {
-    -fx-background-color: -fx-focus-color,
-    linear-gradient(to bottom,
-            derive(@base, -22%) 0%,
-            derive(@base, -13%) 20%,
-            derive(@base, -11%) 50%),
-    -fx-faint-focus-color,
-    linear-gradient(to bottom,
-            derive(@base, -22%) 0%,
-            derive(@base, -13%) 20%,
-            derive(@base, -11%) 50%);
-  }
+      -fx-background-color: -fx-shadow-highlight-color, linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border), @grad;
 
-  .toggle-button:selected {
-    -fx-background-insets: -0.2, 1, -1.4, 2.6;
-    -fx-background-radius: 3, 2, 4, 0;
-
-    &:focused {
-      .toggle-button-background(-fx-color);
+      -fx-background-insets: 0 0 -1 0, 0, 1;
     }
 
     &:hover {
-      .toggle-button-background(darken(@selection-focus-color, 10%));
+      -fx-hover-base: @selection-focus-color;
     }
   }
 
+  &.menu-button:showing, &:hover {
+    -fx-background-color: @selection-focus-color;
+  }
 
   .label {
     -fx-background-color: transparent;
-    //-fx-padding: 0;
   }
 }