Replace with toggle button

pmd-ui/src/main/java/net/sourceforge/pmd/util/fxdesigner/NodeInfoPanelController.java

@@ -30,11 +30,11 @@ import javafx.application.Platform;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
-import javafx.scene.control.CheckMenuItem;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListView;
 import javafx.scene.control.Tab;
 import javafx.scene.control.TabPane;
+import javafx.scene.control.ToggleButton;
 import javafx.scene.control.TreeItem;
 import javafx.scene.control.TreeView;
 
@@ -55,9 +55,9 @@ public class NodeInfoPanelController extends AbstractController {
         Arrays.asList("BeginLine", "EndLine", "BeginColumn", "EndColumn", "FindBoundary", "SingleLine");
 
     @FXML
-    private ToolbarTitledPane metricsTitledPane;
+    private ToggleButton hideCommonAttributesToggle;
     @FXML
-    private CheckMenuItem showAllAttributesMenuItem;
+    private ToolbarTitledPane metricsTitledPane;
     @FXML
     private TabPane nodeInfoTabPane;
     @FXML
@@ -93,7 +93,7 @@ public class NodeInfoPanelController extends AbstractController {
 
         scopeHierarchyTreeView.setCellFactory(view -> new ScopeHierarchyTreeCell());
 
-        showAllAttributesProperty()
+        hideCommonAttributesProperty()
             .values()
             .distinct()
             .subscribe(show -> displayAttributes(selectedNode));
@@ -186,18 +186,18 @@ public class NodeInfoPanelController extends AbstractController {
 
 
     @PersistentProperty
-    public boolean isShowAllAttributes() {
-        return showAllAttributesMenuItem.isSelected();
+    public boolean isHideCommonAttributes() {
+        return hideCommonAttributesToggle.isSelected();
     }
 
 
-    public void setShowAllAttributes(boolean bool) {
-        showAllAttributesMenuItem.setSelected(bool);
+    public void setHideCommonAttributes(boolean bool) {
+        hideCommonAttributesToggle.setSelected(bool);
     }
 
 
-    public Var<Boolean> showAllAttributesProperty() {
-        return Var.fromVal(showAllAttributesMenuItem.selectedProperty(), showAllAttributesMenuItem::setSelected);
+    public Var<Boolean> hideCommonAttributesProperty() {
+        return Var.fromVal(hideCommonAttributesToggle.selectedProperty(), hideCommonAttributesToggle::setSelected);
     }
 
 
@@ -214,7 +214,7 @@ public class NodeInfoPanelController extends AbstractController {
         while (attributeAxisIterator.hasNext()) {
             Attribute attribute = attributeAxisIterator.next();
 
-            if (isShowAllAttributes() || !IGNORABLE_ATTRIBUTES.contains(attribute.getName())) {
+            if (!(isHideCommonAttributes() && IGNORABLE_ATTRIBUTES.contains(attribute.getName()))) {
                 // TODO the display should be handled in a ListCell
                 result.add(attribute.getName() + " = "
                                + ((attribute.getValue() != null) ? attribute.getStringValue() : "null"));

pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/fxml/node-info.fxml

@@ -13,6 +13,7 @@
 <?import javafx.scene.control.TreeView?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.control.ToggleButton?>
 <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>
@@ -29,14 +30,11 @@
                                 AnchorPane.rightAnchor="0.0"
                                 AnchorPane.topAnchor="0.0">
                             <toolbarItems>
-                                <MenuButton mnemonicParsing="false" styleClass="menu-button-no-arrow,icon-menu-button">
+                                <ToggleButton fx:id="hideCommonAttributesToggle" text="Hide common attributes" selected="true" styleClass="icon-button" mnemonicParsing="false">
                                     <graphic>
-                                        <FontIcon iconLiteral="fa-cog" />
+                                        <FontIcon iconLiteral="fas-eye-slash" />
                                     </graphic>
-                                    <items>
-                                        <CheckMenuItem fx:id="showAllAttributesMenuItem" text="Show common attributes" mnemonicParsing="false" />
-                                    </items>
-                                </MenuButton>
+                                </ToggleButton>
                             </toolbarItems>
 
                             <ListView BorderPane.alignment="CENTER" fx:id="xpathAttributesListView"  />

pmd-ui/src/main/resources/net/sourceforge/pmd/util/fxdesigner/less/designer.less

@@ -222,19 +222,57 @@
     -fx-graphic-text-gap: 0;
   }
 
-  &.menu-button .ikonli-font-icon {
+  &.menu-button, &.toggle-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;
+    }
   }
+
   .ikonli-font-icon, .svg-icon {
     -fx-fill: @fx-text-fill;
   }
 
-  &:showing, &:hover {
-    -fx-background-color: @selection-focus-color;
+  &.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;
   }
 
+
+  .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%);
+  }
+
+  .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);
+    }
+
+    &:hover {
+      .toggle-button-background(darken(@selection-focus-color, 10%));
+    }
+  }
+
+
   .label {
     -fx-background-color: transparent;
     //-fx-padding: 0;