Devtools [LayoutEditor]: Support an editing of ems/rems/percentage

Source/core/inspector/LayoutEditor.cpp

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "config.h"
 #include "core/inspector/LayoutEditor.h"
 
 #include "core/css/CSSComputedStyleDeclaration.h"
-#include "core/css/CSSPrimitiveValue.h"
+#include "core/dom/NodeComputedStyle.h"
 #include "core/frame/FrameView.h"
 #include "core/inspector/InspectorCSSAgent.h"
 #include "core/inspector/InspectorHighlight.h"
 #include "core/layout/LayoutBox.h"
 #include "core/layout/LayoutInline.h"
 #include "core/layout/LayoutObject.h"
+#include "core/style/ComputedStyle.h"
 #include "platform/JSONValues.h"
 
 namespace blink {
 
 namespace {
 
 PassRefPtr<JSONObject> createAnchor(const FloatPoint& point, const String& type, const String& propertyName, FloatPoint deltaVector, PassRefPtr<JSONObject> valueDescription)
 {
     RefPtr<JSONObject> object = JSONObject::create();
     object->setNumber("x", point.x());
@@ skipping 77 matching lines @@
 {
     FloatQuad result;
     result.setP1(projection(projectOn.p1(), orthogonals.p1(), translatePoint(origin.p1(), orthogonals.p1(), distance)));
     result.setP2(projection(projectOn.p2(), orthogonals.p2(), translatePoint(origin.p2(), orthogonals.p2(), distance)));
     // We want to translate at top and bottom point in the same direction, so we use p1 here.
     result.setP3(projection(projectOn.p3(), orthogonals.p3(), translatePoint(origin.p3(), orthogonals.p1(), distance)));
     result.setP4(projection(projectOn.p4(), orthogonals.p4(), translatePoint(origin.p4(), orthogonals.p2(), distance)));
     return result;
 }
 
+bool isMutableUnitType(CSSPrimitiveValue::UnitType unitType)
+{
+    return unitType == CSSPrimitiveValue::UnitType::Pixels || unitType == CSSPrimitiveValue::UnitType::Ems || unitType == CSSPrimitiveValue::UnitType::Percentage || unitType == CSSPrimitiveValue::UnitType::Rems;
+}
+
 } // namespace
 
 LayoutEditor::LayoutEditor(InspectorCSSAgent* cssAgent)
     : m_element(nullptr)
     , m_cssAgent(cssAgent)
     , m_changingProperty(CSSPropertyInvalid)
     , m_propertyInitialValue(0)
 {
 }
 
@@ skipping 53 matching lines @@
 }
 
 PassRefPtr<JSONObject> LayoutEditor::createValueDescription(const String& propertyName) const
 {
     RefPtrWillBeRawPtr<CSSPrimitiveValue> cssValue = getPropertyCSSValue(cssPropertyID(propertyName));
     if (cssValue && !(cssValue->isLength() || cssValue->isPercentage()))
         return nullptr;
 
     RefPtr<JSONObject> object = JSONObject::create();
     object->setNumber("value", cssValue ? cssValue->getFloatValue() : 0);
-    object->setString("unit", CSSPrimitiveValue::unitTypeToString(cssValue ? cssValue->typeWithCalcResolved() : CSSPrimitiveValue::UnitType::Pixels));
+    CSSPrimitiveValue::UnitType unitType = cssValue ? cssValue->typeWithCalcResolved() : CSSPrimitiveValue::UnitType::Pixels;
+    object->setString("unit", CSSPrimitiveValue::unitTypeToString(unitType));
     // TODO: Support an editing of other popular units like: em, rem
-    object->setBoolean("mutable", !cssValue || cssValue->isPx());
+    object->setBoolean("mutable", isMutableUnitType(unitType));
     return object.release();
 }
 
 void LayoutEditor::appendAnchorFor(JSONArray* anchors, const String& type, const String& propertyName, const FloatPoint& position, const FloatPoint& orthogonalVector) const
 {
     RefPtr<JSONObject> description = createValueDescription(propertyName);
     if (description)
         anchors->pushObject(createAnchor(position, type, propertyName, orthogonalVector, description.release()));
 }
 
 void LayoutEditor::overlayStartedPropertyChange(const String& anchorName)
 {
     m_changingProperty = cssPropertyID(anchorName);
     if (!m_element || !m_changingProperty)
         return;
 
     RefPtrWillBeRawPtr<CSSPrimitiveValue> cssValue = getPropertyCSSValue(m_changingProperty);
-    if (cssValue && !cssValue->isPx())
+    m_valueUnitType = cssValue ? cssValue->typeWithCalcResolved() : CSSPrimitiveValue::UnitType::Pixels;
+    if (!isMutableUnitType(m_valueUnitType))
         return;
 
+    switch (m_valueUnitType) {
+    case CSSPrimitiveValue::UnitType::Pixels:
+        m_factor = 1;
+        break;
+    case CSSPrimitiveValue::UnitType::Ems:
+        m_factor = m_element->computedStyle()->computedFontSize();
+        break;
+    case CSSPrimitiveValue::UnitType::Percentage:
+        // It is hard to correctly support percentages, so we decided hack it this way: 100% = 1000px
+        m_factor = 10;

[dgozman, 2015/08/15 00:33:47]

Let's try with offsetParent.

[sergeyv, 2015/08/17 23:52:18]

OffsetParent isn't the parent against which the width in percentages is
calculated. So I think it's better to leave this as is for now, and correct it
later if we want to.

+        break;
+    case CSSPrimitiveValue::UnitType::Rems:
+        m_factor = m_element->document().computedStyle()->computedFontSize();
+        break;
+    default:
+        ASSERT_NOT_REACHED();
+        break;
+    }
     m_propertyInitialValue = cssValue ? cssValue->getFloatValue() : 0;
 }
 
 void LayoutEditor::overlayPropertyChanged(float cssDelta)
 {
     if (m_changingProperty) {

[dgozman, 2015/08/15 00:33:47]

&& m_factor

[sergeyv, 2015/08/17 23:52:18]

Done.

         String errorString;
-        m_cssAgent->setCSSPropertyValue(&errorString, m_element.get(), m_changingProperty, String::number(cssDelta + m_propertyInitialValue) + "px");
+        m_cssAgent->setCSSPropertyValue(&errorString, m_element.get(), m_changingProperty, String::format("%.2f", cssDelta / m_factor + m_propertyInitialValue) + CSSPrimitiveValue::unitTypeToString(m_valueUnitType));
     }
 }
 
 void LayoutEditor::overlayEndedPropertyChange()
 {
     m_changingProperty = CSSPropertyInvalid;
     m_propertyInitialValue = 0;
+    m_factor = 0;
+    m_valueUnitType = CSSPrimitiveValue::UnitType::Unknown;
 }
 
 } // namespace blink