Tidy up frame rate display in video examples

* Use a Column element to position QML and video frame rate counters.
* When using small-screen layouts, hide frame rate counters when dialogs
  or menus are displayed.
* Do not display instantaneous frame rate.  If changes in this rate
  trigger a repaint, then the rate itself is changed.  If the repaint
  occurs in less time than the QElapsedTimer resolution, the displayed
  instantaneous rate is always zero.
* Add a label, so it is clear which is the QML repaint rate, and which
  is the video frame rate.

Change-Id: Ie58ab162ab44bd7f1c4b297eed929b9baa73552c
Reviewed-by: Jonas Rabbe <jonas.rabbe@nokia.com>

examples/video/snippets/frequencymonitor/qml/frequencymonitor/FrequencyItem.qml

@@ -55,7 +55,7 @@ Rectangle {
 
     border.width: 1
     border.color: "yellow"
-    width: 3.5 * root.textSize
+    width: 5.5 * root.textSize
     height: 3.0 * root.textSize
     color: "black"
     opacity: 0.5
@@ -74,20 +74,22 @@ Rectangle {
         samplingInterval: root.enabled ? root.samplingInterval : 0
         onAverageFrequencyChanged: {
             if (root.logging) trace()
-            instantaneousFrequencyText.text = monitor.instantaneousFrequency.toFixed(2)
             averageFrequencyText.text = monitor.averageFrequency.toFixed(2)
         }
     }
 
     Text {
-        id: instantaneousFrequencyText
+        id: labelText
         anchors {
-            right: parent.right
+            left: parent.left
             top: parent.top
             margins: 10
         }
         color: root.textColor
-        font.pixelSize: root.textSize
+        font.pixelSize: 0.6 * root.textSize
+        text: root.label
+        width: root.width - 2*anchors.margins
+        elide: Text.ElideRight
     }
 
     Text {