Better theme information page

Bit nicer layout so my eyes don't insta-bleed when checking this page.
Also add information about the size of the rootItem, that's really
useful to know what kind of constraints we're dealing with.

Signed-off-by: Sebastian Kügler <sebas@kde.org>

qt-mobile/qml/ThemeTest.qml

@@ -5,10 +5,10 @@ import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 GridLayout {
 	id: themetest
 	columns: 2
+	anchors.margins: MobileComponents.Units.gridUnit
 
-	MobileComponents.Label {
+	MobileComponents.Heading {
 		Layout.columnSpan: 2
-		Layout.fillHeight: true
 		text: "Theme Information"
 	}
 
@@ -17,14 +17,21 @@ GridLayout {
 	}
 
 	MobileComponents.Label {
-		text: "MobileComponents.Units.gridUnit:"
+		text: "Geometry:"
+	}
+	MobileComponents.Label {
+		text: rootItem.width + "x" + rootItem.height
+	}
+
+	MobileComponents.Label {
+		text: "Units.gridUnit:"
 	}
 	MobileComponents.Label {
 		text: MobileComponents.Units.gridUnit
 	}
 
 	MobileComponents.Label {
-		text: "MobileComponents.Units.devicePixelRatio:"
+		text: "Units.devicePixelRatio:"
 	}
 	MobileComponents.Label {
 		text: MobileComponents.Units.devicePixelRatio
@@ -46,20 +53,20 @@ GridLayout {
 	}
 
 	MobileComponents.Label {
-		text: "hand-computed devicePixelRatio:"
+		text: "FontMetrics devicePixelRatio:"
 	}
 	MobileComponents.Label {
 		text: fm.height / fm.font.pointSize
 	}
 
-	Text {
+	MobileComponents.Label {
 		text: "Text item pixelSize:"
 	}
 	Text {
 		text: font.pixelSize
 	}
 
-	Text {
+	MobileComponents.Label {
 		text: "Text item pointSize:"
 	}
 	Text {

qt-mobile/qml/main.qml

@@ -9,6 +9,7 @@ import org.subsurfacedivelog.mobile 1.0
 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 
 MobileComponents.ApplicationWindow {
+	id: rootItem
 	title: qsTr("Subsurface mobile")
 	property bool fullscreen: true