From 17314f5f302284d97fd64c5477e2390e96ab699e Mon Sep 17 00:00:00 2001 From: Alice Boxhall Date: Wed, 9 Aug 2017 08:13:03 +0000 Subject: [PATCH] [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 Reviewed-by: Dmitry Gozman Cr-Commit-Position: refs/heads/master@{#492899} --- .../css-get-background-colors-expected.txt | 50 +- .../core/inspector/InspectorCSSAgent.cpp | 30 +- .../Source/core/inspector/InspectorCSSAgent.h | 5 +- .../core/inspector/browser_protocol.json | 6 +- third_party/WebKit/Source/devtools/BUILD.gn | 1 + .../devtools/front_end/Images/mediumIcons.png | Bin 2045 -> 2149 bytes .../front_end/Images/mediumIcons_2x.png | Bin 4285 -> 4513 bytes .../devtools/front_end/Images/smallIcons.png | Bin 2850 -> 3056 bytes .../front_end/Images/smallIcons_2x.png | Bin 6342 -> 6790 bytes .../front_end/Images/src/mediumIcons.svg | 485 ++++++++++++--- .../front_end/Images/src/optimize_png.hashes | 4 +- .../front_end/Images/src/smallIcons.svg | 41 +- .../front_end/Images/src/svg2png.hashes | 4 +- .../front_end/color_picker/Contrast.js | 555 ++++++++++++++++++ .../front_end/color_picker/Spectrum.js | 257 +++----- .../front_end/color_picker/module.json | 1 + .../front_end/color_picker/spectrum.css | 151 +++++ .../elements/ColorSwatchPopoverIcon.js | 14 +- .../front_end/elements/StylesSidebarPane.js | 25 +- .../Source/devtools/front_end/sdk/CSSModel.js | 13 +- .../Source/devtools/front_end/ui/Icon.js | 4 + 21 files changed, 1319 insertions(+), 327 deletions(-) create mode 100644 third_party/WebKit/Source/devtools/front_end/color_picker/Contrast.js diff --git a/third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-background-colors-expected.txt b/third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-background-colors-expected.txt index ae710eda5efc87..1da7010fab53d0 100644 --- a/third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-background-colors-expected.txt +++ b/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"} diff --git a/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp b/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp index 3a54c71a50d15d..97ba0a308fdd43 100644 --- a/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp +++ b/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp @@ -2228,7 +2228,10 @@ Response InspectorCSSAgent::setEffectivePropertyValueForNode( Response InspectorCSSAgent::getBackgroundColors( int node_id, - Maybe>* result) { + Maybe>* background_colors, + Maybe* computed_font_size, + Maybe* computed_font_weight, + Maybe* 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::create(); - for (auto color : colors) - result->fromJust()->addItem(color.SerializedAsCSSComponentValue()); + *background_colors = protocol::Array::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(); } diff --git a/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h b/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h index 8639c4e72f76a8..0f4af8c744489d 100644 --- a/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h +++ b/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>* background_colors) override; + protocol::Maybe>* background_colors, + protocol::Maybe* computed_font_size, + protocol::Maybe* computed_font_weight, + protocol::Maybe* computed_body_font_size) override; protocol::Response startRuleUsageTracking() override; protocol::Response takeCoverageDelta( diff --git a/third_party/WebKit/Source/core/inspector/browser_protocol.json b/third_party/WebKit/Source/core/inspector/browser_protocol.json index 154fc77d9f2028..0e7a54e1b16ea2 100644 --- a/third_party/WebKit/Source/core/inspector/browser_protocol.json +++ b/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 }, diff --git a/third_party/WebKit/Source/devtools/BUILD.gn b/third_party/WebKit/Source/devtools/BUILD.gn index 67f6f69bfce384..0ffc52c7935782 100644 --- a/third_party/WebKit/Source/devtools/BUILD.gn +++ b/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", diff --git a/third_party/WebKit/Source/devtools/front_end/Images/mediumIcons.png b/third_party/WebKit/Source/devtools/front_end/Images/mediumIcons.png index dce7e5ce9657ad94c5ec1eb3a5c69f891cba789a..5cd9f460bf45151d605ed1f76b3175d8820e9cc7 100644 GIT binary patch delta 2137 zcmV-f2&VV_59JV$BYy}iNklHDIxmGup#_DR zahbK@#O!6}mEq0{N{$x#-gnjG8_o5s#=iERN~OQ*uYUcY%I}}cZj*$}t6~I#sBG`pAdW&xQZ^9depX&Jp5vI_|j8BCsB*_gg00<*ON1y&~ zyY04v_!sMVrCtq3cxq;gKqv3M`|jKS9|iD=U{wI>p7z9-OS2!yINng3l-Syi8CQni z0^}N@Lejbbqkn|6gr&k?GSvSdeAgg^5)Ktcg@wW+gquKZ<0D3n$~FNO2w&Cq?c~T7 z=qgKoH;1%FA;-=!{Rwt%i3=E-T& zm0RJyhWchX8@9-)w*c5#AhBsW=kGi1w9}!6m5~zPdE{s77Wg%U0KW#+Z?)A{>xmA% zxCTGDlhS6<7?2yJ)pm@W_6yrL4ZoT7ao#~-GC$X3pJ19#Y<{KrH0PSl)s+yaP=k65RDPk;L9r>jY$71Hz) z8I_;-iIW#pKWfyd3TbwUP#L&{cu+kUynn+cCsdtsOk?Xq5w$qlJ&pK?kz@UP8ql0j zg9!M`1b9Jtkbb?2PX=r;Ms8}BIBHu=b<#@hF^-t!86^MB1Z z3b-OL0{m_c`QCcH=M|LZ6mUgg1o%Coq}3-5Kd`*@;Vv|%TKc@MK&tq=RQm*|cAFbCXpkB*WQYREWRih7ey;#&^)=_5 zop76Nj{Hg0yz_3G2oT^S=H^jjO@9D=+AFUJ4Gj$nFnXJZI|S+z3e$R7)>Ii)sMNNB;jq&yX>L=On}r_6Mw+_78pHx zw0F-lGRGh4El^om>D}{;%<%`l1*$K)vV1|LLebcQ_?zBkpSB%{kwY#u?fvKC;4t@q zUcGwx_dIj_q3!|w`t|egdFJ>7?*a9trRz<-{*FePoA*!`^+V4m()K(yK4Q$trN#-5 z?7s=t7u7O21G-VZ1a8smw z`W=rZX5SNC0I~5A%TS(29z#mcT<^Q0%gZZox-L<7&m9XOHa=ob=VLwLL&C3x^E9#X z5$il83NAmP?ylP#XFva}n)gyHjrfR>g-6e8kAHj~_}3PM8>tET8{!Os$CIkn04XxVU)3qN1WVWlRaD34a&%7j7S-`DMcK z!XpfEe8iSn7h#B83hM8_r_pWl&tHC~T-)R$mm0%UUsD>b69HaE2z;ynu^$o6mG~Ab zSoYI&gXs&7;Q9 z|lIFmox!j)6hZ61-3skVYq8bImmy`wvHHeuTvDZs!(Iu+z6d z^~3j<&wu54)qg0BHGcX*Tl2G?e*(6NK#Ux6sR=mjx{3(1gtv=*g78{lz08*g&(F$3 zu>Jx0fauw^v9WhdO?|4n8XbK^(KvI6jgJ^}a;c#0&JoyS4_Z8ov9D*{Q zoprB4P#uY!FzwkVmg}YiNe;PA2Ot6*fd~Z!1v_NbMN-H`bu@ayq$hhcCVRc0n)<}j zh>sXK&i{bI!otn7@+$12{+S2XtMA#heEd^A5>uXid;!G9M=ZxahVu9qB{2bSd3BA{ P00000NkvXXu0mjfc}zXN delta 2032 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 diff --git a/third_party/WebKit/Source/devtools/front_end/Images/smallIcons.png b/third_party/WebKit/Source/devtools/front_end/Images/smallIcons.png index 04e76802645f9bcca0cd648ebea059ce960f3832..c13b06d6e369702342d391f360c53bfa54842005 100644 GIT binary patch delta 3051 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 PqVKJ&%A3m9#zFrNa^d?; literal 6342 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 - - + + - + image/svg+xml - + - - - + + + - - + + - - + + - - + + - - - - - - + + + + + + - - + + - - + + - - + + - - - - - + + + + + + + + - - + + + + - - + + + + - - + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + - - + 1 + 2 + 3 + 4 + a + b + c + d + + + - 1 - 2 - 3 - 4 - a - b - c - d - diff --git a/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes b/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes index c91f6e8e5c7258..656c2c3fff07a4 100644 --- a/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes +++ b/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes @@ -4,8 +4,8 @@ "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28", "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a", "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45", - "smallIcons.svg": "a0d37d8680ac0f0fbfa6ab053de90b04", - "mediumIcons.svg": "e63ac6385b0a6efb783d9838517e5e44", + "smallIcons.svg": "911ffe3e3692229022105c5a51d20bb9", + "mediumIcons.svg": "84090b8a5c439d6d3022f5fbc4dd8221", "breakpoint.svg": "69cd92d807259c022791112809b97799", "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9", "chevrons.svg": "79b4b527771e30b6388ce664077b3409" diff --git a/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg b/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg index dabd05aac7b5d6..b784b81ce22d3c 100644 --- a/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg +++ b/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg @@ -36,17 +36,17 @@ guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:window-width="938" - inkscape:window-height="826" + inkscape:window-width="1272" + inkscape:window-height="1376" id="namedview4455" showgrid="true" - inkscape:zoom="3.7083823" - inkscape:cx="22.472364" - inkscape:cy="66.155904" - inkscape:window-x="1280" + inkscape:zoom="20.977778" + inkscape:cx="54.131178" + inkscape:cy="94.103295" + inkscape:window-x="980" inkscape:window-y="0" inkscape:window-maximized="0" - inkscape:current-layer="svg4185"> + inkscape:current-layer="g74"> 6 + + + + + + + + diff --git a/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes b/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes index c91f6e8e5c7258..656c2c3fff07a4 100644 --- a/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes +++ b/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes @@ -4,8 +4,8 @@ "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28", "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a", "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45", - "smallIcons.svg": "a0d37d8680ac0f0fbfa6ab053de90b04", - "mediumIcons.svg": "e63ac6385b0a6efb783d9838517e5e44", + "smallIcons.svg": "911ffe3e3692229022105c5a51d20bb9", + "mediumIcons.svg": "84090b8a5c439d6d3022f5fbc4dd8221", "breakpoint.svg": "69cd92d807259c022791112809b97799", "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9", "chevrons.svg": "79b4b527771e30b6388ce664077b3409" diff --git a/third_party/WebKit/Source/devtools/front_end/color_picker/Contrast.js b/third_party/WebKit/Source/devtools/front_end/color_picker/Contrast.js new file mode 100644 index 00000000000000..ea0e71cb646e79 --- /dev/null +++ b/third_party/WebKit/Source/devtools/front_end/color_picker/Contrast.js @@ -0,0 +1,555 @@ +// Copyright 2017 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. + +ColorPicker.ContrastInfo = class { + constructor() { + /** @type {?Array} */ + this._hsva = null; + + /** @type {?Common.Color} */ + this._bgColor = null; + + /** @type {?number} */ + this._contrastRatio = null; + + /** @type {?Object} */ + this._contrastRatioThresholds = null; + + /** @type {string} */ + this._colorString = ''; + } + + /** + * @param {?SDK.CSSModel.ContrastInfo} contrastInfo + */ + setContrastInfo(contrastInfo) { + this._contrastRatio = null; + this._contrastRatioThresholds = null; + this._bgColor = null; + + // TODO(aboxhall): distinguish between !backgroundColors (no text) and + // !backgroundColors.length (no computed bg color) + if (!contrastInfo.backgroundColors || !contrastInfo.backgroundColors.length) + return; + + if (contrastInfo.computedFontSize && contrastInfo.computedFontWeight && contrastInfo.computedBodyFontSize) { + var isLargeFont = ColorPicker.ContrastInfo.computeIsLargeFont( + contrastInfo.computedFontSize, contrastInfo.computedFontWeight, contrastInfo.computedBodyFontSize); + + this._contrastRatioThresholds = + ColorPicker.ContrastInfo._ContrastThresholds[(isLargeFont ? 'largeFont' : 'normalFont')]; + } + + // TODO(aboxhall): figure out what to do in the case of multiple background colors (i.e. gradients) + var bgColorText = contrastInfo.backgroundColors[0]; + var bgColor = Common.Color.parse(bgColorText); + if (!bgColor) + return; + + this.setBgColor(bgColor); + } + + /** + * @param {!Array} hsva + * @param {string} colorString + */ + setColor(hsva, colorString) { + this._hsva = hsva; + this._colorString = colorString; + this._updateContrastRatio(); + } + + /** + * @return {string} + */ + colorString() { + return this._colorString; + } + + /** + * @return {?Array} + */ + hsva() { + return this._hsva; + } + + /** + * @param {!Common.Color} bgColor + */ + setBgColor(bgColor) { + this._bgColor = bgColor; + + if (!this._hsva) + return; + + var fgRGBA = []; + Common.Color.hsva2rgba(this._hsva, fgRGBA); + + // If we have a semi-transparent background color over an unknown + // background, draw the line for the "worst case" scenario: where + // the unknown background is the same color as the text. + if (bgColor.hasAlpha) { + var blendedRGBA = []; + Common.Color.blendColors(bgColor.rgba(), fgRGBA, blendedRGBA); + this._bgColor = new Common.Color(blendedRGBA, Common.Color.Format.RGBA); + } + + var bgRGBA = this._bgColor.rgba(); + this._contrastRatio = Common.Color.calculateContrastRatio(fgRGBA, bgRGBA); + } + + /** + * @return {?number} + */ + contrastRatio() { + return this._contrastRatio; + } + + /** + * @return {?Common.Color} + */ + bgColor() { + return this._bgColor; + } + + _updateContrastRatio() { + if (!this._bgColor || !this._hsva) + return; + var fgRGBA = []; + Common.Color.hsva2rgba(this._hsva, fgRGBA); + var bgRGBA = this._bgColor.rgba(); + this._contrastRatio = Common.Color.calculateContrastRatio(fgRGBA, bgRGBA); + } + + /** + * @param {string} level + * @return {?number} + */ + contrastRatioThreshold(level) { + return this._contrastRatioThresholds[level]; + } + + /** + * @param {string} fontSize + * @param {string} fontWeight + * @param {?string} bodyFontSize + * @return {boolean} + */ + static computeIsLargeFont(fontSize, fontWeight, bodyFontSize) { + const boldWeights = ['bold', 'bolder', '600', '700', '800', '900']; + + var fontSizePx = parseFloat(fontSize.replace('px', '')); + var isBold = (boldWeights.indexOf(fontWeight) !== -1); + + if (bodyFontSize) { + var bodyFontSizePx = parseFloat(bodyFontSize.replace('px', '')); + if (isBold) { + if (fontSizePx >= (bodyFontSizePx * 1.2)) + return true; + } else if (fontSizePx >= (bodyFontSizePx * 1.5)) { + return true; + } + return false; + } + + var fontSizePt = Math.ceil(fontSizePx * 72 / 96); + if (isBold) + return fontSizePt >= 14; + else + return fontSizePt >= 18; + } +}; + +ColorPicker.ContrastInfo._ContrastThresholds = { + largeFont: {AA: 3.0, AAA: 4.5}, + normalFont: {AA: 4.5, AAA: 7.0} +}; + +ColorPicker.ContrastOverlay = class { + /** + * @param {!Element} colorElement + * @param {!Element} contentElement + * @param {function(boolean=, !Common.Event=)} toggleMainColorPickerCallback + */ + constructor(colorElement, contentElement, toggleMainColorPickerCallback) { + this._contrastInfo = new ColorPicker.ContrastInfo(); + + var contrastRatioSVG = colorElement.createSVGChild('svg', 'spectrum-contrast-container fill'); + this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-contrast-line'); + + this._contrastValueBubble = colorElement.createChild('div', 'spectrum-contrast-info'); + this._contrastValueBubble.classList.add('force-white-icons'); + this._contrastValueBubble.createChild('span', 'low-contrast').textContent = Common.UIString('Low contrast'); + this._contrastValue = this._contrastValueBubble.createChild('span', 'value'); + this._contrastValueBubble.appendChild(UI.Icon.create('smallicon-contrast-ratio')); + this._contrastValueBubble.title = Common.UIString('Click to toggle contrast ratio details'); + this._contrastValueBubble.addEventListener('mousedown', this._toggleContrastDetails.bind(this), true); + + this._contrastDetails = new ColorPicker.ContrastDetails( + this._contrastInfo, contentElement, toggleMainColorPickerCallback, this._update.bind(this)); + + this._width = 0; + this._height = 0; + } + + /** + * @param {?SDK.CSSModel.ContrastInfo} contrastInfo + */ + setContrastInfo(contrastInfo) { + this._contrastInfo.setContrastInfo(contrastInfo); + this._update(); + } + + /** + * @param {!Array} hsva + * @param {string} colorString + */ + setColor(hsva, colorString) { + this._contrastInfo.setColor(hsva, colorString); + this._update(); + } + + /** + * @param {number} x + * @param {number} y + */ + moveAwayFrom(x, y) { + var bubble = this._contrastValueBubble; + if (!bubble.boxInWindow().contains(x, y)) + return; + + if (bubble.offsetWidth > ((bubble.offsetParent.offsetWidth / 2) - 10)) + bubble.classList.toggle('contrast-info-top'); + else + bubble.classList.toggle('contrast-info-left'); + } + + _update() { + if (this._contrastInfo.contrastRatio() === null) + return; + + this._contrastValue.textContent = this._contrastInfo.contrastRatio().toFixed(2); + + var AA = this._contrastInfo.contrastRatioThreshold('AA'); + if (!AA) + return; + + // TODO(aboxhall): only redraw line if hue value changes + this._drawContrastRatioLine(AA, this._width, this._height); + + var passesAA = this._contrastInfo.contrastRatio() >= AA; + this._contrastValueBubble.classList.toggle('contrast-fail', !passesAA); + + this._contrastDetails.update(); + } + + /** + * @param {number} width + * @param {number} height + * @param {!AnchorBox} draggerBox + */ + show(width, height, draggerBox) { + if (this._contrastInfo.contrastRatio() === null) { + this.hide(); + return; + } + + this._width = width; + this._height = height; + this._update(); + + this._contrastValueBubble.classList.remove('hidden'); + + var dragX = draggerBox.x + (draggerBox.width / 2); + var dragY = draggerBox.y + (draggerBox.height / 2); + this.moveAwayFrom(dragX, dragY); + } + + hide() { + this._contrastValueBubble.classList.add('hidden'); + } + + /** + * @param {!Event} event + */ + _toggleContrastDetails(event) { + if ('button' in event && event.button !== 0) + return; + event.consume(); + this._contrastDetails.toggleVisible(); + } + + /** + * @param {number} requiredContrast + * @param {number} width + * @param {number} height + */ + _drawContrastRatioLine(requiredContrast, width, height) { + // TODO(aboxhall): throttle this to avoid being called in rapid succession when using eyedropper + if (!width || !height) + return; + + var hsva = this._contrastInfo.hsva(); + var bgColor = this._contrastInfo.bgColor(); + if (!hsva || !bgColor) + return; + + const dS = 0.02; + const epsilon = 0.002; + const H = 0; + const S = 1; + const V = 2; + const A = 3; + + var fgRGBA = []; + Common.Color.hsva2rgba(hsva, fgRGBA); + var bgRGBA = bgColor.rgba(); + var bgLuminance = Common.Color.luminance(bgRGBA); + var blendedRGBA = []; + Common.Color.blendColors(fgRGBA, bgRGBA, blendedRGBA); + var fgLuminance = Common.Color.luminance(blendedRGBA); + this._contrastValueBubble.classList.toggle('light', fgLuminance > 0.5); + var fgIsLighter = fgLuminance > bgLuminance; + var desiredLuminance = Common.Color.desiredLuminance(bgLuminance, requiredContrast, fgIsLighter); + + var lastV = hsva[V]; + var currentSlope = 0; + var candidateHSVA = [hsva[H], 0, 0, hsva[A]]; + var pathBuilder = []; + var candidateRGBA = []; + Common.Color.hsva2rgba(candidateHSVA, candidateRGBA); + Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA); + + /** + * Approach the desired contrast ratio by modifying the given component + * from the given starting value. + * @param {number} index + * @param {number} x + * @param {boolean} onAxis + * @return {?number} + */ + function approach(index, x, onAxis) { + while (0 <= x && x <= 1) { + candidateHSVA[index] = x; + Common.Color.hsva2rgba(candidateHSVA, candidateRGBA); + Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA); + var fgLuminance = Common.Color.luminance(blendedRGBA); + var dLuminance = fgLuminance - desiredLuminance; + + if (Math.abs(dLuminance) < (onAxis ? epsilon / 10 : epsilon)) + return x; + else + x += (index === V ? -dLuminance : dLuminance); + } + return null; + } + + for (var s = 0; s < 1 + dS; s += dS) { + s = Math.min(1, s); + candidateHSVA[S] = s; + + var v = lastV; + v = lastV + currentSlope * dS; + + v = approach(V, v, s === 0); + if (v === null) + break; + + currentSlope = (v - lastV) / dS; + + pathBuilder.push(pathBuilder.length ? 'L' : 'M'); + pathBuilder.push(s * width); + pathBuilder.push((1 - v) * height); + } + + if (s < 1 + dS) { + s -= dS; + candidateHSVA[V] = 1; + s = approach(S, s, true); + if (s !== null) + pathBuilder = pathBuilder.concat(['L', s * width, -1]); + } + + this._contrastRatioLine.setAttribute('d', pathBuilder.join(' ')); + } +}; + +ColorPicker.ContrastDetails = class { + /** + * @param {!ColorPicker.ContrastInfo} contrastInfo + * @param {!Element} contentElement + * @param {function(boolean=, !Common.Event=)} toggleMainColorPickerCallback + * @param {function()} backgroundColorPickedCallback + */ + constructor(contrastInfo, contentElement, toggleMainColorPickerCallback, backgroundColorPickedCallback) { + /** @type {!ColorPicker.ContrastInfo} */ + this._contrastInfo = contrastInfo; + + /** @type {function(boolean=, !Common.Event=)} */ + this._toggleMainColorPicker = toggleMainColorPickerCallback; + + /** @type {function()} */ + this._backgroundColorPickedCallback = backgroundColorPickedCallback; + + this._contrastDetails = contentElement.createChild('div', 'spectrum-contrast-details'); + var contrastValueRow = this._contrastDetails.createChild('div'); + contrastValueRow.createTextChild(Common.UIString('Contrast Ratio')); + + var contrastLink = contrastValueRow.appendChild(UI.createExternalLink( + 'https://developers.google.com/web/fundamentals/accessibility/accessible-styles#color_and_contrast', + 'Color and contrast on Web Fundamentals', 'contrast-link')); + contrastLink.textContent = ''; + contrastLink.appendChild(UI.Icon.create('mediumicon-info')); + + this._contrastValueBubble = contrastValueRow.createChild('span', 'contrast-details-value force-white-icons'); + this._contrastValue = this._contrastValueBubble.createChild('span'); + this._contrastValueBubbleIcons = []; + this._contrastValueBubbleIcons.push( + this._contrastValueBubble.appendChild(UI.Icon.create('smallicon-checkmark-square'))); + this._contrastValueBubbleIcons.push( + this._contrastValueBubble.appendChild(UI.Icon.create('smallicon-checkmark-behind'))); + this._contrastValueBubbleIcons.push(this._contrastValueBubble.appendChild(UI.Icon.create('smallicon-no'))); + this._contrastValueBubble.addEventListener('mouseenter', this._toggleContrastValueHovered.bind(this)); + this._contrastValueBubble.addEventListener('mouseleave', this._toggleContrastValueHovered.bind(this)); + + var toolbar = new UI.Toolbar('', contrastValueRow); + var closeButton = new UI.ToolbarButton('Hide contrast ratio details', 'largeicon-delete'); + closeButton.addEventListener(UI.ToolbarButton.Events.Click, this.hide.bind(this)); + toolbar.appendToolbarItem(closeButton); + + this._contrastThresholds = this._contrastDetails.createChild('div', 'contrast-thresholds'); + this._contrastAA = this._contrastThresholds.createChild('div', 'contrast-threshold'); + this._contrastAA.appendChild(UI.Icon.create('smallicon-checkmark-square')); + this._contrastAA.appendChild(UI.Icon.create('smallicon-no')); + this._contrastPassFailAA = this._contrastAA.createChild('span', 'contrast-pass-fail'); + + this._contrastAAA = this._contrastThresholds.createChild('div', 'contrast-threshold'); + this._contrastAAA.appendChild(UI.Icon.create('smallicon-checkmark-square')); + this._contrastAAA.appendChild(UI.Icon.create('smallicon-no')); + this._contrastPassFailAAA = this._contrastAAA.createChild('span', 'contrast-pass-fail'); + + var bgColorRow = this._contrastDetails.createChild('div'); + bgColorRow.createTextChild(Common.UIString('Background color:')); + this._bgColorSwatch = new ColorPicker.Spectrum.Swatch(bgColorRow, 'contrast'); + + this._bgColorPicker = bgColorRow.createChild('button', 'background-color-picker'); + this._bgColorPicker.appendChild(UI.Icon.create('largeicon-eyedropper')); + this._bgColorPicker.addEventListener('click', this._toggleBackgroundColorPicker.bind(this, undefined)); + this._bgColorPickedBound = this._bgColorPicked.bind(this); + } + + update() { + var contrastRatio = this._contrastInfo.contrastRatio(); + var bgColor = this._contrastInfo.bgColor(); + if (!contrastRatio || !bgColor) + return; + + this._contrastValue.textContent = contrastRatio.toFixed(2); + this._bgColorSwatch.setColor(bgColor); + + var AA = this._contrastInfo.contrastRatioThreshold('AA'); + var AAA = this._contrastInfo.contrastRatioThreshold('AAA'); + + var passesAA = this._contrastInfo.contrastRatio() >= AA; + this._contrastPassFailAA.textContent = ''; + this._contrastPassFailAA.createTextChild(passesAA ? Common.UIString('Passes ') : Common.UIString('Fails ')); + this._contrastPassFailAA.createChild('strong').textContent = Common.UIString('AA (%s)', AA.toFixed(1)); + this._contrastAA.classList.toggle('pass', passesAA); + this._contrastAA.classList.toggle('fail', !passesAA); + + var passesAAA = this._contrastInfo.contrastRatio() >= AAA; + this._contrastPassFailAAA.textContent = ''; + this._contrastPassFailAAA.createTextChild(passesAAA ? Common.UIString('Passes ') : Common.UIString('Fails ')); + this._contrastPassFailAAA.createChild('strong').textContent = Common.UIString('AAA (%s)', AAA.toFixed(1)); + this._contrastAAA.classList.toggle('pass', passesAAA); + this._contrastAAA.classList.toggle('fail', !passesAAA); + + this._contrastValueBubble.classList.toggle('contrast-fail', !passesAA); + this._contrastValueBubble.classList.toggle('contrast-aa', passesAA); + this._contrastValueBubble.classList.toggle('contrast-aaa', passesAAA); + this._contrastValueBubble.style.color = this._contrastInfo.colorString(); + for (var i = 0; i < this._contrastValueBubbleIcons.length; i++) + this._contrastValueBubbleIcons[i].style.setProperty('background', this._contrastInfo.colorString(), 'important'); + + var isWhite = (this._contrastInfo.bgColor().hsla()[2] > 0.9); + this._contrastValueBubble.style.background = + /** @type {string} */ (this._contrastInfo.bgColor().asString(Common.Color.Format.RGBA)); + this._contrastValueBubble.classList.toggle('contrast-color-white', isWhite); + + if (isWhite) { + this._contrastValueBubble.style.removeProperty('border-color'); + } else { + this._contrastValueBubble.style.borderColor = + /** @type {string} */ (this._contrastInfo.bgColor().asString(Common.Color.Format.RGBA)); + } + } + + toggleVisible() { + this._contrastDetails.classList.toggle('visible'); + if (this._contrastDetails.classList.contains('visible')) + this._toggleMainColorPicker(false); + else + this._toggleBackgroundColorPicker(false); + } + + hide() { + this._contrastDetails.classList.remove('visible'); + this._toggleMainColorPicker(false); + } + + /** + * @param {boolean=} enabled + */ + _toggleBackgroundColorPicker(enabled) { + if (enabled === undefined) { + this._bgColorPicker.classList.toggle('active'); + enabled = this._bgColorPicker.classList.contains('active'); + } else { + this._bgColorPicker.classList.toggle('active', enabled); + } + UI.ARIAUtils.setPressed(this._bgColorPicker, enabled); + + InspectorFrontendHost.setEyeDropperActive(enabled); + if (enabled) { + InspectorFrontendHost.events.addEventListener( + InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this._bgColorPickedBound); + } else { + InspectorFrontendHost.events.removeEventListener( + InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this._bgColorPickedBound); + } + } + + /** + * @param {!Common.Event} event + */ + _bgColorPicked(event) { + var rgbColor = /** @type {!{r: number, g: number, b: number, a: number}} */ (event.data); + var rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100]; + var color = Common.Color.fromRGBA(rgba); + this._contrastInfo.setBgColor(color); + this.update(); + this._backgroundColorPickedCallback(); + InspectorFrontendHost.bringToFront(); + } + + /** + * @param {!Event} event + */ + _toggleContrastValueHovered(event) { + if (!this._contrastValueBubble.classList.contains('contrast-fail')) + return; + + if (event.type === 'mouseenter') { + this._contrastValueBubble.classList.add('hover'); + for (var i = 0; i < this._contrastValueBubbleIcons.length; i++) + this._contrastValueBubbleIcons[i].style.setProperty('background', '#333', 'important'); + } else { + this._contrastValueBubble.classList.remove('hover'); + for (var i = 0; i < this._contrastValueBubbleIcons.length; i++) { + this._contrastValueBubbleIcons[i].style.setProperty( + 'background', this._contrastInfo.colorString(), 'important'); + } + } + } +}; diff --git a/third_party/WebKit/Source/devtools/front_end/color_picker/Spectrum.js b/third_party/WebKit/Source/devtools/front_end/color_picker/Spectrum.js index 8bc5ae758d94c9..78493e7bbe711a 100644 --- a/third_party/WebKit/Source/devtools/front_end/color_picker/Spectrum.js +++ b/third_party/WebKit/Source/devtools/front_end/color_picker/Spectrum.js @@ -53,8 +53,11 @@ ColorPicker.Spectrum = class extends UI.VBox { .createChild('div', 'spectrum-val fill') .createChild('div', 'spectrum-dragger'); - if (Runtime.experiments.isEnabled('colorContrastRatio')) - this._setUpContrastRatioUI(); + if (Runtime.experiments.isEnabled('colorContrastRatio')) { + var boundToggleColorPicker = this._toggleColorPicker.bind(this); + this._contrastOverlay = + new ColorPicker.ContrastOverlay(this._colorElement, this.contentElement, boundToggleColorPicker); + } var toolbar = new UI.Toolbar('spectrum-eye-dropper', this.contentElement); this._colorPickerButton = new UI.ToolbarToggle(Common.UIString('Toggle color picker'), 'largeicon-eyedropper'); @@ -63,14 +66,7 @@ ColorPicker.Spectrum = class extends UI.VBox { UI.ToolbarButton.Events.Click, this._toggleColorPicker.bind(this, undefined)); toolbar.appendToolbarItem(this._colorPickerButton); - var swatchElement = this.contentElement.createChild('span', 'swatch'); - this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner'); - this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay'); - this._swatchOverlayElement.addEventListener('click', this._onCopyIconClick.bind(this)); - this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMouseout.bind(this)); - this._swatchCopyIcon = UI.Icon.create('largeicon-copy', 'copy-color-icon'); - this._swatchCopyIcon.title = Common.UIString('Copy color to clipboard'); - this._swatchOverlayElement.appendChild(this._swatchCopyIcon); + this._swatch = new ColorPicker.Spectrum.Swatch(this.contentElement); this._hueElement = this.contentElement.createChild('div', 'spectrum-hue'); this._hueSlider = this._hueElement.createChild('div', 'spectrum-slider'); @@ -191,34 +187,11 @@ ColorPicker.Spectrum = class extends UI.VBox { hsva[1] = Number.constrain((event.x - this._colorOffset.left) / this.dragWidth, 0, 1); hsva[2] = Number.constrain(1 - (event.y - this._colorOffset.top) / this.dragHeight, 0, 1); - if (Runtime.experiments.isEnabled('colorContrastRatio')) - positionContrastInfo(this._contrastInfo, event); + if (this._contrastOverlay) + this._contrastOverlay.moveAwayFrom(event.x, event.y); this._innerSetColor(hsva, '', undefined, ColorPicker.Spectrum._ChangeSource.Other); } - - /** - * @param {!Element} info - * @param {!Event} event - */ - function positionContrastInfo(info, event) { - if (!info.boxInWindow().contains(event.x, event.y)) - return; - - if (info.offsetWidth > ((info.offsetParent.offsetWidth / 2) - 10)) - info.classList.toggle('contrast-info-top'); - else - info.classList.toggle('contrast-info-left'); - } - } - - _onCopyIconClick() { - this._swatchCopyIcon.setIconType('largeicon-checkmark'); - InspectorFrontendHost.copyText(this.colorString()); - } - - _onCopyIconMouseout() { - this._swatchCopyIcon.setIconType('largeicon-copy'); } _updatePalettePanel() { @@ -590,6 +563,14 @@ ColorPicker.Spectrum = class extends UI.VBox { this._innerSetColor(color.hsva(), '', colorFormat, ColorPicker.Spectrum._ChangeSource.Model); } + /** + * @param {?SDK.CSSModel.ContrastInfo} contrastInfo + */ + setContrastInfo(contrastInfo) { + if (this._contrastOverlay) + this._contrastOverlay.setContrastInfo(contrastInfo); + } + /** * @param {!Array|undefined} hsva * @param {string|undefined} colorString @@ -615,6 +596,9 @@ ColorPicker.Spectrum = class extends UI.VBox { this._colorFormat = colorFormat; } + if (hsva && this._contrastOverlay) + this._contrastOverlay.setColor(hsva, this.colorString()); + this._updateHelperLocations(); this._updateUI(); @@ -624,14 +608,6 @@ ColorPicker.Spectrum = class extends UI.VBox { this.dispatchEventToListeners(ColorPicker.Spectrum.Events.ColorChanged, this.colorString()); } - /** - * @param {!Common.Color} color - */ - setContrastColor(color) { - this._contrastColor = color; - this._updateUI(); - } - /** * @return {!Common.Color} */ @@ -718,154 +694,17 @@ ColorPicker.Spectrum = class extends UI.VBox { } } - /** - * @param {number} requiredContrast - * @param {!Array} bgRGBA - * @param {!Array} fgRGBA - */ - _drawContrastRatioLine(requiredContrast, bgRGBA, fgRGBA) { - if (!this._contrastColor || !this.dragWidth || !this.dragHeight) - return; - - /** const */ var width = this.dragWidth; - /** const */ var height = this.dragHeight; - /** const */ var dS = 0.02; - /** const */ var epsilon = 0.002; - /** const */ var H = 0; - /** const */ var S = 1; - /** const */ var V = 2; - /** const */ var A = 3; - - var bgLuminance = Common.Color.luminance(bgRGBA); - var blendedRGBA = []; - Common.Color.blendColors(fgRGBA, bgRGBA, blendedRGBA); - var fgLuminance = Common.Color.luminance(blendedRGBA); - var fgIsLighter = fgLuminance > bgLuminance; - var desiredLuminance = Common.Color.desiredLuminance(bgLuminance, requiredContrast, fgIsLighter); - - var lastV = this._hsv[V]; - var currentSlope = 0; - var candidateHSVA = [this._hsv[H], 0, 0, this._hsv[A]]; - var pathBuilder = []; - var candidateRGBA = []; - Common.Color.hsva2rgba(candidateHSVA, candidateRGBA); - Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA); - - /** - * Approach the desired contrast ratio by modifying the given component - * from the given starting value. - * @param {number} index - * @param {number} x - * @param {boolean} onAxis - * @return {?number} - */ - function approach(index, x, onAxis) { - while (0 <= x && x <= 1) { - candidateHSVA[index] = x; - Common.Color.hsva2rgba(candidateHSVA, candidateRGBA); - Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA); - var fgLuminance = Common.Color.luminance(blendedRGBA); - var dLuminance = fgLuminance - desiredLuminance; - - if (Math.abs(dLuminance) < (onAxis ? epsilon / 10 : epsilon)) - return x; - else - x += (index === V ? -dLuminance : dLuminance); - } - return null; - } - - for (var s = 0; s < 1 + dS; s += dS) { - s = Math.min(1, s); - candidateHSVA[S] = s; - - var v = lastV; - v = lastV + currentSlope * dS; - - v = approach(V, v, s === 0); - if (v === null) - break; - - currentSlope = (v - lastV) / dS; - - pathBuilder.push(pathBuilder.length ? 'L' : 'M'); - pathBuilder.push(s * width); - pathBuilder.push((1 - v) * height); - } - - if (s < 1 + dS) { - s -= dS; - candidateHSVA[V] = 1; - s = approach(S, s, true); - if (s !== null) - pathBuilder = pathBuilder.concat(['L', s * width, -1]); - } - - this._contrastRatioLine.setAttribute('d', pathBuilder.join(' ')); - } - - _setUpContrastRatioUI() { - var contrastRatioSVG = this._colorElement.createSVGChild('svg', 'spectrum-contrast-container fill'); - this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-contrast-line'); - this._contrastInfo = this._colorElement.createChild('div', 'spectrum-contrast-info'); - this._contrastInfo.classList.add('force-white-icons'); - this._contrastInfo.createChild('span', 'low-contrast').textContent = Common.UIString('Low contrast'); - this._contrastInfo.createChild('span', 'value'); - this._contrastInfo.appendChild(UI.Icon.create('smallicon-contrast-ratio')); - } - - - /** - * @param {boolean} show - */ - _setContrastInfoVisible(show) { - var info = this._contrastInfo; - if (!show) { - info.classList.add('hidden'); - return; - } - - info.classList.remove('hidden'); - - var fgRGBA = []; - Common.Color.hsva2rgba(this._hsv, fgRGBA); - var bgRGBA = this._contrastColor.rgba(); - var contrastRatio = Common.Color.calculateContrastRatio(fgRGBA, bgRGBA); - - // TODO(aboxhall): Determine size of text and switch between AA/AAA ratings. - var requiredContrast = 4.5; - - this._contrastInfo.querySelector('.value').textContent = contrastRatio.toFixed(2); - this._contrastInfo.classList.toggle('contrast-fail', (contrastRatio < requiredContrast)); - this._drawContrastRatioLine(requiredContrast, bgRGBA, fgRGBA); - - var draggerBox = this._colorDragElement.boxInWindow(); - var dragX = draggerBox.x + (draggerBox.width / 2); - var dragY = draggerBox.y + (draggerBox.height / 2); - var infoBox = info.boxInWindow(); - if (infoBox.contains(dragX, dragY)) { - if (info.offsetWidth > ((info.offsetParent.offsetWidth / 2) - 10)) - info.classList.toggle('contrast-info-top'); - else - info.classList.toggle('contrast-info-left'); - } - } - - _updateUI() { var h = Common.Color.fromHSVA([this._hsv[0], 1, 1, 1]); this._colorElement.style.backgroundColor = /** @type {string} */ (h.asString(Common.Color.Format.RGB)); - if (Runtime.experiments.isEnabled('colorContrastRatio')) { - if (this.dragWidth && this._contrastColor) - this._setContrastInfoVisible(true); + if (this._contrastOverlay) { + if (this.dragWidth) + this._contrastOverlay.show(this.dragWidth, this.dragHeight, this._colorDragElement.boxInWindow()); else - this._setContrastInfoVisible(false); + this._contrastOverlay.hide(); } - this._swatchInnerElement.style.backgroundColor = - /** @type {string} */ (this._color().asString(Common.Color.Format.RGBA)); - // Show border if the swatch is white. - this._swatchInnerElement.classList.toggle('swatch-inner-white', this._color().hsla()[2] > 0.9); + this._swatch.setColor(this._color(), this.colorString()); this._colorDragElement.style.backgroundColor = /** @type {string} */ (this._color().asString(Common.Color.Format.RGBA)); var noAlpha = Common.Color.fromHSVA(this._hsv.slice(0, 3).concat(1)); @@ -1125,3 +964,51 @@ ColorPicker.Spectrum.MaterialPalette = { matchUserFormat: true, colors: Object.keys(ColorPicker.Spectrum.MaterialPaletteShades) }; + +ColorPicker.Spectrum.Swatch = class { + /** + * @param {!Element} parentElement + * @param {string=} className + */ + constructor(parentElement, className) { + /** @type {?string} */ + this._colorString; + + var swatchElement = parentElement.createChild('span', 'swatch'); + if (className) + swatchElement.classList.add(className); + this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner'); + + this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay'); + this._swatchOverlayElement.addEventListener('click', this._onCopyIconClick.bind(this)); + this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMouseout.bind(this)); + this._swatchCopyIcon = UI.Icon.create('largeicon-copy', 'copy-color-icon'); + this._swatchCopyIcon.title = Common.UIString('Copy color to clipboard'); + this._swatchOverlayElement.appendChild(this._swatchCopyIcon); + } + + /** + * @param {!Common.Color} color + * @param {string=} colorString + */ + setColor(color, colorString) { + this._swatchInnerElement.style.backgroundColor = + /** @type {string} */ (color.asString(Common.Color.Format.RGBA)); + // Show border if the swatch is white. + this._swatchInnerElement.classList.toggle('swatch-inner-white', color.hsla()[2] > 0.9); + this._colorString = colorString || null; + if (colorString) + this._swatchOverlayElement.hidden = false; + else + this._swatchOverlayElement.hidden = true; + } + + _onCopyIconClick() { + this._swatchCopyIcon.setIconType('largeicon-checkmark'); + InspectorFrontendHost.copyText(this._colorString); + } + + _onCopyIconMouseout() { + this._swatchCopyIcon.setIconType('largeicon-copy'); + } +}; diff --git a/third_party/WebKit/Source/devtools/front_end/color_picker/module.json b/third_party/WebKit/Source/devtools/front_end/color_picker/module.json index b8e7cb6f3a21f0..d5b79a535e22ca 100644 --- a/third_party/WebKit/Source/devtools/front_end/color_picker/module.json +++ b/third_party/WebKit/Source/devtools/front_end/color_picker/module.json @@ -4,6 +4,7 @@ "sdk" ], "scripts": [ + "Contrast.js", "Spectrum.js" ], "resources": [ diff --git a/third_party/WebKit/Source/devtools/front_end/color_picker/spectrum.css b/third_party/WebKit/Source/devtools/front_end/color_picker/spectrum.css index 405c437fadbe38..90d66c79455d4e 100644 --- a/third_party/WebKit/Source/devtools/front_end/color_picker/spectrum.css +++ b/third_party/WebKit/Source/devtools/front_end/color_picker/spectrum.css @@ -131,6 +131,123 @@ margin-right: 4px; } +.spectrum-contrast-details { + position: absolute; + background-color: white; + width: 100%; + height: 111px; + top: 124px; + z-index: 13; + font-size: 13px; + color: #333; + display: none; + line-height: initial; +} + +.spectrum-contrast-details div.toolbar { + position: absolute; + right: 6px; + top: 6px; + margin: 0; +} + +.spectrum-contrast-details div.toolbar [is=ui-icon] { + position: absolute; + right: 6px; + top: 6px; + margin: 0; + background: transparent; +} + +.spectrum-contrast-details.visible { + display: initial; +} + +.spectrum-contrast-details div { + margin: 12px; +} + +.contrast-pass-fail { + margin-left: 0.5em; +} + +.contrast-threshold .smallicon-checkmark-square, +.contrast-threshold .smallicon-no{ + display: none; +} + +.contrast-threshold.pass .smallicon-checkmark-square { + display: inline-block; + background-color: #00b06f; +} + +.contrast-threshold.fail .smallicon-no { + display: inline-block; + background-color: #b40202; +} + +.contrast-threshold-value { + font-weight: bold; +} +.spectrum-contrast-details .contrast-thresholds div { + margin: 0; +} + +.contrast-link { + margin-left: 0.5em; +} + +.contrast-link .mediumicon-info { + margin-top: -3px; + background-color: #333; +} + +.contrast-details-value { + color: white; + border-radius: 2px; + margin-left: 0.5em; + padding: 1px 3px; + align-items: baseline; +} + +.contrast-details-value.contrast-color-white { + border: 1px solid #ddd; +} + +.contrast-details-value.contrast-fail.hover { + color: #333 !important; + background-color: white !important; +} + +.contrast-details-value.contrast-fail.hover [is=ui-icon] { + background-color: black !important; +} + +.contrast-details-value [is=ui-icon] { + display: none; + margin-left: 0.5em; +} + +.contrast-details-value .smallicon-checkmark-behind { + margin-left: -6px; +} + +.contrast-details-value.contrast-fail .smallicon-no { + display: inline-block; +} + +.contrast-details-value.contrast-fail .smallicon-no { + display: inline-block; +} + +.contrast-details-value.contrast-aa .smallicon-checkmark-square { + display: inline-block; +} + +.contrast-details-value.contrast-aaa .smallicon-checkmark-behind { + display: inline-block; +} + .swatch { width: 32px; height: 32px; @@ -460,3 +577,37 @@ div.palette-preview { background-color: #ddd; color: white; } + +.swatch.contrast { + width: 20px; + height: 20px; + margin: -10px; + position: relative; + top: -5px; + left: 17px; + background-image: url(Images/checker.png); + border-radius: 10px; + display: inline-block; +} + +.swatch.contrast .swatch-overlay { + padding: 0; +} + +.swatch.contrast [is=ui-icon] { + margin: -2px; +} + +button.background-color-picker { + border: 0; + padding: 0; + background: none; + position: relative; + margin-top: -12px; + left: 26px; + top: 7px; +} + +button.background-color-picker.active [is=ui-icon].largeicon-eyedropper.icon-mask{ + background-color: hsl(218, 81%, 59%); +} diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js b/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js index 3f8336c709c1f1..68cd7b24ad235a 100644 --- a/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js +++ b/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js @@ -102,7 +102,7 @@ Elements.ColorSwatchPopoverIcon = class { var shiftClickMessage = Common.UIString('Shift + Click to change color format.'); this._swatch.iconElement().title = Common.UIString('Open color picker. %s', shiftClickMessage); this._swatch.iconElement().addEventListener('click', this._iconClick.bind(this)); - this._contrastColor = null; + this._contrastInfo = null; this._boundSpectrumChanged = this._spectrumChanged.bind(this); this._boundOnScroll = this._onScroll.bind(this); @@ -117,12 +117,12 @@ Elements.ColorSwatchPopoverIcon = class { } /** - * @param {!Common.Color} color + * @param {?SDK.CSSModel.ContrastInfo} contrastInfo */ - setContrastColor(color) { - this._contrastColor = color; + setContrastInfo(contrastInfo) { + this._contrastInfo = contrastInfo; if (this._spectrum) - this._spectrum.setContrastColor(this._contrastColor); + this._spectrum.setContrastInfo(contrastInfo); } /** @@ -145,8 +145,8 @@ Elements.ColorSwatchPopoverIcon = class { format = color.format(); this._spectrum = new ColorPicker.Spectrum(); this._spectrum.setColor(color, format); - if (this._contrastColor) - this._spectrum.setContrastColor(this._contrastColor); + if (this._contrastInfo) + this._spectrum.setContrastInfo(this._contrastInfo); this._spectrum.addEventListener(ColorPicker.Spectrum.Events.SizeChanged, this._spectrumResized, this); this._spectrum.addEventListener(ColorPicker.Spectrum.Events.ColorChanged, this._boundSpectrumChanged); diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js index 7a0491aad84be2..70f2bf7194e99a 100644 --- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js +++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js @@ -2016,29 +2016,10 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { var swatchIcon = new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch); /** - * @param {?Array} backgroundColors + * @param {?SDK.CSSModel.ContrastInfo} contrastInfo */ - function computedCallback(backgroundColors) { - // TODO(aboxhall): distinguish between !backgroundColors (no text) and - // !backgroundColors.length (no computed bg color) - if (!backgroundColors || !backgroundColors.length) - return; - // TODO(samli): figure out what to do in the case of multiple background colors (i.e. gradients) - var bgColorText = backgroundColors[0]; - var bgColor = Common.Color.parse(bgColorText); - if (!bgColor) - return; - - // If we have a semi-transparent background color over an unknown - // background, draw the line for the "worst case" scenario: where - // the unknown background is the same color as the text. - if (bgColor.hasAlpha) { - var blendedRGBA = []; - Common.Color.blendColors(bgColor.rgba(), color.rgba(), blendedRGBA); - bgColor = new Common.Color(blendedRGBA, Common.Color.Format.RGBA); - } - - swatchIcon.setContrastColor(bgColor); + function computedCallback(contrastInfo) { + swatchIcon.setContrastInfo(contrastInfo); } if (Runtime.experiments.isEnabled('colorContrastRatio') && this.property.name === 'color' && diff --git a/third_party/WebKit/Source/devtools/front_end/sdk/CSSModel.js b/third_party/WebKit/Source/devtools/front_end/sdk/CSSModel.js index 8f0d1aa35008ab..30e324f8f50e7d 100644 --- a/third_party/WebKit/Source/devtools/front_end/sdk/CSSModel.js +++ b/third_party/WebKit/Source/devtools/front_end/sdk/CSSModel.js @@ -362,10 +362,14 @@ SDK.CSSModel = class extends SDK.SDKModel { /** * @param {number} nodeId - * @return {!Promise>} + * @return {!Promise} */ - backgroundColorsPromise(nodeId) { - return this._agent.getBackgroundColors(nodeId); + async backgroundColorsPromise(nodeId) { + var response = this._agent.invoke_getBackgroundColors({nodeId}); + if (response[Protocol.Error]) + return null; + + return response; } /** @@ -748,6 +752,9 @@ SDK.SDKModel.register(SDK.CSSModel, SDK.Target.Capability.DOM, true); /** @typedef {!{range: !Protocol.CSS.SourceRange, styleSheetId: !Protocol.CSS.StyleSheetId, wasUsed: boolean}} */ SDK.CSSModel.RuleUsage; +/** @typedef {{backgroundColors: ?Array, computedFontSize: string, computedFontWeights: string, computedBodyFontSize: string}} */ +SDK.CSSModel.ContrastInfo; + /** @enum {symbol} */ SDK.CSSModel.Events = { FontsUpdated: Symbol('FontsUpdated'), diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js index f2be3d00dbfbde..134be3620bb987 100644 --- a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js +++ b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js @@ -119,6 +119,8 @@ UI.Icon.SpriteSheets = { UI.Icon.Descriptors = { 'smallicon-bezier': {position: 'a5', spritesheet: 'smallicons', isMask: true}, 'smallicon-checkmark': {position: 'b5', spritesheet: 'smallicons'}, + 'smallicon-checkmark-square': {position: 'b6', spritesheet: 'smallicons', isMask: true}, + 'smallicon-checkmark-behind': {position: 'd6', spritesheet: 'smallicons', isMask: true}, 'smallicon-command-result': {position: 'a4', spritesheet: 'smallicons'}, 'smallicon-contrast-ratio': {position: 'a6', spritesheet: 'smallicons', isMask: true}, 'smallicon-cross': {position: 'b4', spritesheet: 'smallicons'}, @@ -129,6 +131,7 @@ UI.Icon.Descriptors = { 'smallicon-info': {position: 'c3', spritesheet: 'smallicons'}, 'smallicon-inline-breakpoint-conditional': {position: 'd5', spritesheet: 'smallicons'}, 'smallicon-inline-breakpoint': {position: 'd4', spritesheet: 'smallicons'}, + 'smallicon-no': {position: 'c6', spritesheet: 'smallicons', isMask: true}, 'smallicon-orange-ball': {position: 'd3', spritesheet: 'smallicons'}, 'smallicon-red-ball': {position: 'a2', spritesheet: 'smallicons'}, 'smallicon-shadow': {position: 'b2', spritesheet: 'smallicons', isMask: true}, @@ -147,6 +150,7 @@ UI.Icon.Descriptors = { 'mediumicon-clear-storage': {position: 'a4', spritesheet: 'mediumicons', isMask: true}, 'mediumicon-cookie': {position: 'b4', spritesheet: 'mediumicons', isMask: true}, 'mediumicon-database': {position: 'c4', spritesheet: 'mediumicons', isMask: true}, + 'mediumicon-info': {position: 'c1', spritesheet: 'mediumicons', isMask: true}, 'mediumicon-manifest': {position: 'd4', spritesheet: 'mediumicons', isMask: true}, 'mediumicon-service-worker': {position: 'a3', spritesheet: 'mediumicons', isMask: true}, 'mediumicon-table': {position: 'b3', spritesheet: 'mediumicons', isMask: true},