expose margin values in pixels for the user

--margin values are in percentage, now the user
is able to hover over these values in order
to be informed how much they are calculated in
pixels

app/view/view.cpp

@@ -1365,6 +1365,21 @@ void View::setColorizer(QQuickItem *colorizer)
     emit colorizerChanged();
 }
 
+QQuickItem *View::metrics() const
+{
+    return m_metrics;
+}
+
+void View::setMetrics(QQuickItem *metrics)
+{
+    if (m_metrics == metrics) {
+        return;
+    }
+
+    m_metrics = metrics;
+    emit metricsChanged();
+}
+
 ViewPart::Effects *View::effects() const
 {
     return m_effects;

app/view/view.h

@@ -121,6 +121,7 @@ class View : public PlasmaQuick::ContainmentView
     Q_PROPERTY(QString name READ name NOTIFY nameChanged)
 
     Q_PROPERTY(QQuickItem *colorizer READ colorizer WRITE setColorizer NOTIFY colorizerChanged)
+    Q_PROPERTY(QQuickItem *metrics READ metrics WRITE setMetrics NOTIFY metricsChanged)
 
     Q_PROPERTY(QVariantList containmentActions READ containmentActions NOTIFY containmentActionsChanged)
 
@@ -239,6 +240,9 @@ public:
     QQuickItem *colorizer() const;
     void setColorizer(QQuickItem *colorizer);
 
+    QQuickItem *metrics() const;
+    void setMetrics(QQuickItem *metrics);
+
     QVariantList containmentActions() const;
 
     QQuickView *configView();
@@ -336,6 +340,7 @@ signals:
     void localGeometryChanged();
     void maxLengthChanged();
     void maxThicknessChanged();
+    void metricsChanged();
     void normalThicknessChanged();
     void maxNormalThicknessChanged();
     void nameChanged();
@@ -447,6 +452,7 @@ private:
     Layout::GenericLayout *m_layout{nullptr};
 
     QQuickItem *m_colorizer{nullptr};
+    QQuickItem *m_metrics{nullptr};
 
     QPointer<PlasmaQuick::ConfigView> m_appletConfigView;
     QPointer<ViewPart::PrimaryConfigView> m_primaryConfigView;

containment/package/contents/ui/VisibilityManager.qml

@@ -212,6 +212,13 @@ Item{
         value: colorizerManager
     }
 
+    Binding{
+        target: latteView
+        property: "metrics"
+        when: latteView
+        value: metrics
+    }
+
     //! View::Effects bindings
     Binding{
         target: latteView && latteView.effects ? latteView.effects : null

shell/package/contents/configuration/pages/AppearanceConfig.qml

@@ -164,12 +164,23 @@ PlasmaComponents.Page {
                     }
 
                     PlasmaComponents.Label {
-                        text: proportionSizeSlider.value !== proportionSizeSlider.from ?
-                                  i18nc("number in percentage, e.g. 85 %","%0 %").arg(proportionSizeSlider.value.toFixed(1)) : i18nc("no value in percentage","--- %")
-                        horizontalAlignment: Text.AlignRight
+                        id: absoluteSizeLbl
                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
+
+                        text: proportionSizeSlider.value !== proportionSizeSlider.from ?
+                                  (absoluteSizeLblMouseArea.containsMouse ?
+                                       i18nc("number in pixels, e.g. 64 px.","%0 px.").arg(latteView.metrics.maxIconSize) :
+                                       i18nc("number in percentage, e.g. 85 %","%0 %").arg(proportionSizeSlider.value.toFixed(1))) :
+                                  i18nc("no value in percentage","--- %")
+                        horizontalAlignment: Text.AlignRight
                         enabled: proportionSizeSlider.value !== proportionSizeSlider.from
+
+                        MouseArea {
+                            id: absoluteSizeLblMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                        }
                     }
                 }
 
@@ -617,10 +628,20 @@ PlasmaComponents.Page {
                     }
 
                     PlasmaComponents.Label {
-                        text: i18nc("number in percentage, e.g. 85 %","%0 %").arg(lengthExtMarginSlider.value)
+                        text: lengthMarginLblMouseArea.containsMouse ?
+                                  i18nc("number in pixels, e.g. 8 px.","%0 px.").arg(currentValueInPixels) :
+                                  i18nc("number in percentage, e.g. 85 %","%0 %").arg(lengthExtMarginSlider.value)
                         horizontalAlignment: Text.AlignRight
                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
+
+                        readonly property int currentValueInPixels: (lengthExtMarginSlider.value/100) * latteView.metrics.maxIconSize
+
+                        MouseArea {
+                            id: lengthMarginLblMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                        }
                     }
                 }
 
@@ -653,12 +674,21 @@ PlasmaComponents.Page {
                     }
 
                     PlasmaComponents.Label {
-                        text: i18nc("number in percentage, e.g. 85 %","%0 %").arg(currentValue)
+                        text: thickMarginLblMouseArea.containsMouse ?
+                                  i18nc("number in pixels, e.g. 8 px.","%0 px.").arg(currentValueInPixels) :
+                                  i18nc("number in percentage, e.g. 85 %","%0 %").arg(currentValue)
                         horizontalAlignment: Text.AlignRight
                         Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
                         Layout.maximumWidth: theme.mSize(theme.defaultFont).width * 4
 
                         readonly property int currentValue: Math.max(thickMarginSlider.minimumInternalValue, thickMarginSlider.value)
+                        readonly property int currentValueInPixels: (currentValue/100) * latteView.metrics.maxIconSize
+
+                        MouseArea {
+                            id: thickMarginLblMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                        }
                     }
                 }