[Devtools] Add panel showing more information about contrast ratio

Bug: 514674
Change-Id: I70a5052807d341b245ece4b12118e764d824dd54
Reviewed-on: https://chromium-review.googlesource.com/572448
Commit-Queue: Alice Boxhall <aboxhall@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#492899}

third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-background-colors-expected.txt

@@ -6,101 +6,101 @@ No text: should be null
 
 Running test: testNoBgColor
 No background color: should be white
-{"backgroundColors":["rgb(255, 255, 255)"]}
+{"backgroundColors":["rgb(255, 255, 255)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testOpaqueBgColor
 Opaque background color: should be red
-{"backgroundColors":["rgb(255, 0, 0)"]}
+{"backgroundColors":["rgb(255, 0, 0)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testLayeredOpaqueBgColors
 Opaque background color in front of another opaque background color: should be blue
-{"backgroundColors":["rgb(0, 0, 255)"]}
+{"backgroundColors":["rgb(0, 0, 255)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testOneSemitransparentBgColor
 Semi-transparent background color: should be light red
-{"backgroundColors":["rgb(255, 127, 127)"]}
+{"backgroundColors":["rgb(255, 127, 127)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testTwoSemitransparentBgColors
 Two layered semi-transparent background colors: should be medium red
-{"backgroundColors":["rgb(255, 63, 63)"]}
+{"backgroundColors":["rgb(255, 63, 63)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testOpaqueGradientBackground
 Opaque gradient: should be red and black
-{"backgroundColors":["rgb(255, 0, 0)","rgb(0, 0, 0)"]}
+{"backgroundColors":["rgb(255, 0, 0)","rgb(0, 0, 0)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testOpaqueGradientBackgroundBehindScrim
 Opaque gradient behind semi-transparent color: should be light red and 50% grey
-{"backgroundColors":["rgb(255, 128, 128)","rgb(128, 128, 128)"]}
+{"backgroundColors":["rgb(255, 128, 128)","rgb(128, 128, 128)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testOpaqueGradientBackgroundWithColorBackground
 Opaque gradient and solid color background on same element: should be red and black
-{"backgroundColors":["rgb(255, 0, 0)","rgb(0, 0, 0)"]}
+{"backgroundColors":["rgb(255, 0, 0)","rgb(0, 0, 0)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testPartiallyTransparentGradientBackground
 Semi-transparent gradient: should be light red and 50% grey
-{"backgroundColors":["rgb(255, 127, 127)","rgb(127, 127, 127)"]}
+{"backgroundColors":["rgb(255, 127, 127)","rgb(127, 127, 127)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testPartiallyTransparentGradientAndColorBackground
 Semi-transparent gradient and solid color on same element: should be dark red and 50% grey
-{"backgroundColors":["rgb(128, 0, 0)","rgb(128, 128, 128)"]}
+{"backgroundColors":["rgb(128, 0, 0)","rgb(128, 128, 128)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testTwoPartiallyTransparentGradientBackgrounds
 Layered semi-transparent gradients: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testPartiallyOverlappingBackground
 Partially overlapping background: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: smallerBackground
 Background smaller than text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testObscuredPartiallyOverlappingBackground
 Red background obscuring partially overlapping blue background: should be red only
-{"backgroundColors":["rgb(255, 0, 0)"]}
+{"backgroundColors":["rgb(255, 0, 0)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testBackgroundImage
 Background image: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testBackgroundImageAndBgColor
 Background image with background color: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testBackgroundImageBehindScrim
 Background image behind scrim: should be semi-transparent white
-{"backgroundColors":["rgba(255, 255, 255, 0.5)"]}
+{"backgroundColors":["rgba(255, 255, 255, 0.5)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundImage
 Image behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundImageBehindScrim
 Image behind scrim: should be semi-transparent white
-{"backgroundColors":["rgba(255, 255, 255, 0.5)"]}
+{"backgroundColors":["rgba(255, 255, 255, 0.5)"],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundCanvas
 Canvas behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundEmbed
 Embed behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundObject
 Object behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundPicture
 Picture behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundSVG
 SVG behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 
 Running test: testForegroundVideo
 Video behind text: should be empty array
-{"backgroundColors":[]}
+{"backgroundColors":[],"computedFontSize":"16px","computedFontWeight":"400","computedBodyFontSize":"16px"}
 

third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp

@@ -2228,7 +2228,10 @@ Response InspectorCSSAgent::setEffectivePropertyValueForNode(
 
 Response InspectorCSSAgent::getBackgroundColors(
     int node_id,
-    Maybe<protocol::Array<String>>* result) {
+    Maybe<protocol::Array<String>>* background_colors,
+    Maybe<String>* computed_font_size,
+    Maybe<String>* computed_font_weight,
+    Maybe<String>* computed_body_font_size) {
   Element* element = nullptr;
   Response response = dom_agent_->AssertElement(node_id, element);
   if (!response.isSuccess())
@@ -2274,9 +2277,28 @@ Response InspectorCSSAgent::getBackgroundColors(
     }
   }
 
-  *result = protocol::Array<String>::create();
-  for (auto color : colors)
-    result->fromJust()->addItem(color.SerializedAsCSSComponentValue());
+  *background_colors = protocol::Array<String>::create();
+  for (auto color : colors) {
+    background_colors->fromJust()->addItem(
+        color.SerializedAsCSSComponentValue());
+  }
+
+  CSSComputedStyleDeclaration* computed_style_info =
+      CSSComputedStyleDeclaration::Create(element, true);
+  const CSSValue* font_size =
+      computed_style_info->GetPropertyCSSValue(CSSPropertyFontSize);
+  *computed_font_size = font_size->CssText();
+  const CSSValue* font_weight =
+      computed_style_info->GetPropertyCSSValue(CSSPropertyFontWeight);
+  *computed_font_weight = font_weight->CssText();
+
+  HTMLElement* body = element->GetDocument().body();
+  CSSComputedStyleDeclaration* computed_style_body =
+      CSSComputedStyleDeclaration::Create(body, true);
+  const CSSValue* body_font_size =
+      computed_style_body->GetPropertyCSSValue(CSSPropertyFontSize);
+  *computed_body_font_size = body_font_size->CssText();
+
   return Response::OK();
 }
 

third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h

@@ -191,7 +191,10 @@ class CORE_EXPORT InspectorCSSAgent final
       const String& value) override;
   protocol::Response getBackgroundColors(
       int node_id,
-      protocol::Maybe<protocol::Array<String>>* background_colors) override;
+      protocol::Maybe<protocol::Array<String>>* background_colors,
+      protocol::Maybe<String>* computed_font_size,
+      protocol::Maybe<String>* computed_font_weight,
+      protocol::Maybe<String>* computed_body_font_size) override;
 
   protocol::Response startRuleUsageTracking() override;
   protocol::Response takeCoverageDelta(

third_party/WebKit/Source/core/inspector/browser_protocol.json

@@ -3326,7 +3326,11 @@
                     { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to get background colors for." }
                 ],
                 "returns": [
-                    { "name": "backgroundColors", "type": "array", "items": { "type": "string" }, "description": "The range of background colors behind this element, if it contains any visible text. If no visible text is present, this will be undefined. In the case of a flat background color, this will consist of simply that color. In the case of a gradient, this will consist of each of the color stops. For anything more complicated, this will be an empty array. Images will be ignored (as if the image had failed to load).", "optional": true }
+                    { "name": "backgroundColors", "type": "array", "items": { "type": "string" }, "description": "The range of background colors behind this element, if it contains any visible text. If no visible text is present, this will be undefined. In the case of a flat background color, this will consist of simply that color. In the case of a gradient, this will consist of each of the color stops. For anything more complicated, this will be an empty array. Images will be ignored (as if the image had failed to load).", "optional": true },
+                    { "name": "computedFontSize", "type": "string", "description": "The computed font size for this node, as a CSS computed value string (e.g. '12px').", "optional": true },
+                    { "name": "computedFontWeight", "type": "string", "description": "The computed font weight for this node, as a CSS computed value string (e.g. 'normal' or '100').", "optional": true },
+
+                    { "name": "computedBodyFontSize", "type": "string", "description": "The computed font size for the document body, as a computed CSS value string (e.g. '16px').", "optional": true }
                 ],
                 "experimental": true
             },

third_party/WebKit/Source/devtools/BUILD.gn

@@ -104,6 +104,7 @@ all_devtools_files = [
   "front_end/cm_web_modes/htmlmixed.js",
   "front_end/cm_web_modes/javascript.js",
   "front_end/cm_web_modes/xml.js",
+  "front_end/color_picker/Contrast.js",
   "front_end/color_picker/module.json",
   "front_end/color_picker/spectrum.css",
   "front_end/color_picker/Spectrum.js",