I see two options. Either you build the UI using GWT components, so you can add and read the style information in the code, or you try to get the element below the mouse pointer using JSNI and then try to analyze this element.
The first, probably easier, solution looks like this:
public class FontTest implements EntryPoint {
public void onModuleLoad() {
FlowPanel panel = new FlowPanel();
Label labelA = new Label("Apple");
labelA.getElement().getStyle().setProperty("fontFamily", "Arial");
Label labelB = new Label("Banana");
labelB.getElement().getStyle().setProperty("fontFamily", "Courier");
labelB.getElement().getStyle().setFontSize(5, Unit.EM);
labelB.getElement().getStyle().setBackgroundColor("rgb(255, 0, 0)");
panel.add(labelA);
panel.add(labelB);
labelA.addMouseOverHandler(new FontMousOverHandler());
labelB.addMouseOverHandler(new FontMousOverHandler());
RootLayoutPanel.get().add(panel);
}
private static class FontMousOverHandler implements MouseOverHandler {
@Override
public void onMouseOver(MouseOverEvent event) {
Label label = (Label) event.getSource();
String font = label.getElement().getStyle()
.getProperty("fontFamily");
String color = label.getElement().getStyle().getBackgroundColor();
PopupPanel pp = new PopupPanel(true);
pp.add(new Label(font + " / " + color));
pp.setPopupPosition(label.getAbsoluteLeft(), label.getAbsoluteTop());
pp.show();
}
}
}
The above sample is simplified, you'd have to make your code much smarter to handle all variations of HTML attributes, CSS style-names and direct styles.
The second option is to get the element that is currently below the mouse pointer. This can be done using some JSNI magic:
private native Element getElementFromPoint(int x, int y) /*-{
return $wnd.document.elementFromPoint(x, y);
}-*/;
Of course you need a trigger to call the getElementFromPoint() method. You can use a MouseHandler as well or some kind of background code (a.k.a. Timer) to trigger. Once know where the mouse pointer is, get the element and analyze the style of element.
