Refactor Hiscore EndPoints to Material Tab

In an attempt to clean-up and re-use UI elements, I am applying the
material tabs to the hiscores plugin (previously it was jpanels
that looked exactly like tabs because at the time this panel was made,
there were no icon material tabs yet)

Also refactored the GridBagLayout code a little bit, makes it easier to
read and expand.

runelite-client/src/main/java/net/runelite/client/plugins/hiscore/HiscorePanel.java

@@ -47,7 +47,6 @@ import javax.swing.ImageIcon;
 import javax.swing.JLabel;
 import javax.swing.JPanel;
 import javax.swing.border.EmptyBorder;
-import javax.swing.border.MatteBorder;
 import lombok.extern.slf4j.Slf4j;
 import net.runelite.api.Client;
 import net.runelite.api.Experience;
@@ -56,6 +55,8 @@ import net.runelite.client.ui.ColorScheme;
 import net.runelite.client.ui.FontManager;
 import net.runelite.client.ui.PluginPanel;
 import net.runelite.client.ui.components.IconTextField;
+import net.runelite.client.ui.components.materialtabs.MaterialTab;
+import net.runelite.client.ui.components.materialtabs.MaterialTabGroup;
 import net.runelite.client.util.RunnableExceptionLogger;
 import net.runelite.client.util.StackFormatter;
 import net.runelite.http.api.hiscore.HiscoreClient;
@@ -130,8 +131,8 @@ public class HiscorePanel extends PluginPanel
 
 	private final JPanel statsPanel = new JPanel();
 
-	/* A list of all the selectable endpoints (ironman, deadman, etc) */
+	/* Container of all the selectable endpoints (ironman, deadman, etc) */
-	private final List<JPanel> endPoints = new ArrayList<>();
+	private final MaterialTabGroup tabGroup;
 
 	private final HiscoreClient hiscoreClient = new HiscoreClient();
 
@@ -166,20 +167,24 @@ public class HiscorePanel extends PluginPanel
 		super();
 		this.config = config;
 
-		setBorder(new EmptyBorder(10, 10, 0, 10));
+		// The layout seems to be ignoring the top margin and only gives it
+		// a 2-3 pixel margin, so I set the value to 18 to compensate
+		// TODO: Figure out why this layout is ignoring most of the top margin
+		setBorder(new EmptyBorder(18, 10, 0, 10));
 		setBackground(ColorScheme.DARK_GRAY_COLOR);
-
+		setLayout(new GridBagLayout());
-		// Create GBL to arrange sub items
-		GridBagLayout gridBag = new GridBagLayout();
-		setLayout(gridBag);
 
 		// Expand sub items to fit width of panel, align to top of panel
 		GridBagConstraints c = new GridBagConstraints();
 		c.fill = GridBagConstraints.HORIZONTAL;
-		c.anchor = GridBagConstraints.NORTH;
+		c.gridx = 0;
+		c.gridy = 0;
+		c.weightx = 1;
+		c.weighty = 0;
+		c.insets = new Insets(0, 0, 10, 0);
 
 		input = new IconTextField();
-		input.setPreferredSize(new Dimension(100, 30));
+		input.setMinimumSize(new Dimension(0, 30));
 		input.setBackground(ColorScheme.DARKER_GRAY_COLOR);
 		input.setHoverBackgroundColor(ColorScheme.DARK_GRAY_HOVER_COLOR);
 		input.setIcon(SEARCH_ICON);
@@ -207,17 +212,11 @@ public class HiscorePanel extends PluginPanel
 			}
 		});
 
-		c.gridx = 0;
+		add(input, c);
-		c.gridy = 0;
+		c.gridy++;
-		c.weightx = 1;
-		c.weighty = 0;
-		c.insets = new Insets(0, 0, 10, 0);
-		gridBag.setConstraints(input, c);
-		add(input);
 
-		/* The container for all the endpoint selectors */
+		tabGroup = new MaterialTabGroup();
-		JPanel endpointPanel = new JPanel();
+		tabGroup.setLayout(new GridLayout(1, 5, 7, 7));
-		endpointPanel.setLayout(new GridLayout(1, 5, 7, 1));
 
 		for (HiscoreEndpoint endpoint : HiscoreEndpoint.values())
 		{
@@ -230,43 +229,37 @@ public class HiscorePanel extends PluginPanel
 						endpoint.name().toLowerCase() + ".png"));
 				}
 
-				JPanel panel = new JPanel();
+				MaterialTab tab = new MaterialTab(new ImageIcon(iconImage), tabGroup, null);
-				JLabel label = new JLabel();
+				tab.setToolTipText(endpoint.getName() + " Hiscores");
+				tab.setOnSelectEvent(() ->
+				{
+					if (loading)
+					{
+						return false;
+					}
 
-				label.setIcon(new ImageIcon(iconImage));
+					selectedEndPoint = endpoint;
+					return true;
+				});
 
-				panel.add(label);
+				// Adding the lookup method to a mouseListener instead of the above onSelectedEvent
-				panel.setBackground(ColorScheme.DARKER_GRAY_COLOR);
+				// Because sometimes you might want to switch the tab, without calling for lookup
-				panel.setToolTipText(endpoint.getName() + " Hiscores");
+				// Ex: selecting the normal hiscores as default
-				panel.addMouseListener(new MouseAdapter()
+				tab.addMouseListener(new MouseAdapter()
 				{
 					@Override
-					public void mouseClicked(MouseEvent e)
+					public void mousePressed(MouseEvent mouseEvent)
 					{
 						if (loading)
 						{
 							return;
 						}
+
 						executor.execute(HiscorePanel.this::lookup);
-						selectedEndPoint = endpoint;
-						updateButtons();
-					}
-
-					@Override
-					public void mouseEntered(MouseEvent e)
-					{
-						panel.setBackground(ColorScheme.DARKER_GRAY_HOVER_COLOR);
-					}
-
-					@Override
-					public void mouseExited(MouseEvent e)
-					{
-						panel.setBackground(ColorScheme.DARKER_GRAY_COLOR);
 					}
 				});
 
-				endPoints.add(panel);
+				tabGroup.addTab(tab);
-				endpointPanel.add(panel);
 			}
 			catch (IOException ex)
 			{
@@ -274,14 +267,11 @@ public class HiscorePanel extends PluginPanel
 			}
 		}
 
-		/* Default endpoint is the general (normal) endpoint */
+		// Default selected tab is normal hiscores
-		selectedEndPoint = HiscoreEndpoint.NORMAL;
+		resetEndpoints();
-		updateButtons();
 
-		c.gridx = 0;
+		add(tabGroup, c);
-		c.gridy = 1;
+		c.gridy++;
-		gridBag.setConstraints(endpointPanel, c);
-		add(endpointPanel);
 
 		// Panel that holds skill icons
 		GridLayout stats = new GridLayout(8, 3);
@@ -296,10 +286,8 @@ public class HiscorePanel extends PluginPanel
 			statsPanel.add(panel);
 		}
 
-		c.gridx = 0;
+		add(statsPanel, c);
-		c.gridy = 2;
+		c.gridy++;
-		gridBag.setConstraints(statsPanel, c);
-		add(statsPanel);
 
 		JPanel totalPanel = new JPanel();
 		totalPanel.setBackground(ColorScheme.DARKER_GRAY_COLOR);
@@ -308,10 +296,8 @@ public class HiscorePanel extends PluginPanel
 		totalPanel.add(makeSkillPanel(null)); //combat has no hiscore skill, refered to as null
 		totalPanel.add(makeSkillPanel(OVERALL));
 
-		c.gridx = 0;
+		add(totalPanel, c);
-		c.gridy = 3;
+		c.gridy++;
-		gridBag.setConstraints(totalPanel, c);
-		add(totalPanel);
 
 		JPanel minigamePanel = new JPanel();
 		// These aren't all on one row because when there's a label with four or more digits it causes the details
@@ -324,10 +310,8 @@ public class HiscorePanel extends PluginPanel
 		minigamePanel.add(makeSkillPanel(BOUNTY_HUNTER_ROGUE));
 		minigamePanel.add(makeSkillPanel(BOUNTY_HUNTER_HUNTER));
 
-		c.gridx = 0;
+		add(minigamePanel, c);
-		c.gridy = 4;
+		c.gridy++;
-		gridBag.setConstraints(minigamePanel, c);
-		add(minigamePanel);
 	}
 
 	@Override
@@ -376,10 +360,7 @@ public class HiscorePanel extends PluginPanel
 	public void lookup(String username)
 	{
 		input.setText(username);
-
+		resetEndpoints();
-		selectedEndPoint = HiscoreEndpoint.NORMAL; //reset the endpoint to regular player
-		updateButtons();
-
 		lookup();
 	}
 
@@ -678,18 +659,9 @@ public class HiscorePanel extends PluginPanel
 		return lookup.replace('\u00A0', ' ');
 	}
 
-	/*
+	private void resetEndpoints()
-		When an endpoint gets selected, this method will correctly display the selected one
-		with an orange underline.
-	 */
-	private void updateButtons()
 	{
-		for (JPanel panel : endPoints)
+		// Select the first tab (NORMAL hiscores)
-		{
+		tabGroup.select(tabGroup.getTab(0));
-			panel.setBorder(new EmptyBorder(0, 0, 1, 0));
-		}
-
-		int selectedIndex = selectedEndPoint.ordinal();
-		endPoints.get(selectedIndex).setBorder(new MatteBorder(0, 0, 1, 0, ColorScheme.BRAND_ORANGE));
 	}
 }