Attachment 341857 Details for Bug 186239 – Patch

[patch] Patch

bug-186239-20180602174828.patch (text/plain), 15.68 KB, created by Daniel Bates on 2018-06-02 17:48:28 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Daniel Bates

Created: 2018-06-02 17:48:28 PDT

Size: 15.68 KB

patch

obsolete

>Subversion Revision: 232439
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index e99b807bf30131a0c10bd4c73dedbb509ffea1bb..f3d0ff33c11158f0abc919886e0ee236647d1d77 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,27 @@
>+2018-06-02  Daniel Bates  <dabates@apple.com>
>+
>+        Update Strong Password appearance
>+        https://bugs.webkit.org/show_bug.cgi?id=186239
>+        <rdar://problem/38183795>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Fix up the gradient mask to start half-way through the visible text and size it to the
>+        width of the visible text. Also change the color of the Strong Password label to 80% black.
>+
>+        We achieve sizing of the gradient to the width of the visible text by changing the CSS display
>+        of the inner text element to be an inline-block and specifying "max-width: 100%" so that
>+        its maximum width is less than or equal to the width of its containing block. Additionally,
>+        only apply inner text element styles when the field is not disabled or read-only and has
>+        a strong password appearance. Otherwise these styles, specifically the display type, will
>+        adversely effect rendering of the text when the field is disabled or readonly.
>+
>+        * css/html.css:
>+        (input::-webkit-strong-password-auto-fill-button):
>+        * html/HTMLInputElement.cpp:
>+        (WebCore::autoFillStrongPasswordMaskImage):
>+        (WebCore::HTMLInputElement::createInnerTextStyle):
>+
> 2018-06-01  Ryosuke Niwa  <rniwa@webkit.org>
> 
>         Editor can hold references to Documents after you navigate away
>diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
>index be2856645ea2247431193e67ccba5fc125143cc8..3d4607aef57382616d17c14f1c1e1c12ca57208e 100644
>--- a/Source/WebCore/css/html.css
>+++ b/Source/WebCore/css/html.css
>@@ -549,7 +549,7 @@ input::-webkit-strong-password-auto-fill-button {
>     -webkit-user-select: none !important;
>     pointer-events: none !important;
>     text-align: right !important;
>-    color: black !important;
>+    color: rgba(0, 0, 0, 0.8) !important;
>     padding-left: 6px !important;
>     white-space: nowrap !important;
> }
>diff --git a/Source/WebCore/html/HTMLInputElement.cpp b/Source/WebCore/html/HTMLInputElement.cpp
>index d22073419b54f4147128a1195812b70ea7983c95..8e584d985509290bbcb72e82607f9c30e813fd8d 100644
>--- a/Source/WebCore/html/HTMLInputElement.cpp
>+++ b/Source/WebCore/html/HTMLInputElement.cpp
>@@ -2023,11 +2023,11 @@ static Ref<CSSLinearGradientValue> autoFillStrongPasswordMaskImage()
> {
>     CSSGradientColorStop firstStop;
>     firstStop.m_color = CSSValuePool::singleton().createColorValue(Color::black);
>-    firstStop.m_position = CSSValuePool::singleton().createValue(3, CSSPrimitiveValue::UnitType::CSS_EMS);
>+    firstStop.m_position = CSSValuePool::singleton().createValue(50, CSSPrimitiveValue::UnitType::CSS_PERCENTAGE);
> 
>     CSSGradientColorStop secondStop;
>     secondStop.m_color = CSSValuePool::singleton().createColorValue(Color::transparent);
>-    secondStop.m_position = CSSValuePool::singleton().createValue(7, CSSPrimitiveValue::UnitType::CSS_EMS);
>+    secondStop.m_position = CSSValuePool::singleton().createValue(100, CSSPrimitiveValue::UnitType::CSS_PERCENTAGE);
> 
>     auto gradient = CSSLinearGradientValue::create(CSSGradientRepeat::NonRepeating, CSSGradientType::CSSLinearGradient);
>     gradient->setAngle(CSSValuePool::singleton().createValue(90, CSSPrimitiveValue::UnitType::CSS_DEG));
>@@ -2050,7 +2050,9 @@ RenderStyle HTMLInputElement::createInnerTextStyle(const RenderStyle& style)
> 
>     textBlockStyle.setDisplay(DisplayType::Block);
> 
>-    if (hasAutoFillStrongPasswordButton()) {
>+    if (hasAutoFillStrongPasswordButton() && !isDisabledOrReadOnly()) {
>+        textBlockStyle.setDisplay(DisplayType::InlineBlock);
>+        textBlockStyle.setMaxWidth(Length { 100, Percent });
>         textBlockStyle.setColor({ 0.0f, 0.0f, 0.0f, 0.6f });
>         textBlockStyle.setTextOverflow(TextOverflow::Clip);
>         textBlockStyle.setMaskImage(styleResolver().styleImage(autoFillStrongPasswordMaskImage()));
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index bcdf769fde486ffb014888188f1f9f9b8d8d20e8..f6326caea23edc31758b69cc1093330990f48be3 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,18 @@
>+2018-06-02  Daniel Bates  <dabates@apple.com>
>+
>+        Update Strong Password appearance
>+        https://bugs.webkit.org/show_bug.cgi?id=186239
>+        <rdar://problem/38183795>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Update expected results as necessary for the change in appearance.
>+
>+        * platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
>+        * platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
>+        * platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
>+        * platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
>+
> 2018-06-01  Wenson Hsieh  <wenson_hsieh@apple.com>
> 
>         [Extra zoom mode] The user should always be able to double tap to zoom to a scale of at least 1
>diff --git a/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt b/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>index 7bbe0b51f7cdef4d8753bf3432b8aa3267e8ebd5..4d2278f73686b216f36cff0fe609c28ee755828a 100644
>--- a/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>+++ b/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>@@ -69,8 +69,8 @@ layer at (178,78) size 140x12 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 140x12 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x12
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (337,78) size 300x12
>-  RenderBlock {DIV} at (0,0) size 300x12 [color=#00000099]
>+layer at (337,78) size 284x12 backgroundClip at (337,78) size 283x12 clip at (337,78) size 283x12
>+  RenderBlock {DIV} at (0,0) size 284x12 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x12
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
> layer at (654,78) size 20x12 scrollWidth 284
>@@ -85,5 +85,3 @@ layer at (176,143) size 20x12 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 20x12 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x12
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (215,143) size 140x12
>-  RenderBlock {DIV} at (0,0) size 140x12 [color=#00000099]
>diff --git a/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt b/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>index 00ca2f8fbf89b841a7653ce1d2d7258ac9563c61..12268fee1445d957abfb31bf68a552d3dbe55098 100644
>--- a/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>+++ b/LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>@@ -27,49 +27,49 @@ layer at (0,0) size 800x216
>         RenderTextControl {INPUT} at (200,93) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
> layer at (17,70) size 140x12 scrollHeight 13
>   RenderFlexibleBox {DIV} at (6,3) size 141x13
>-    RenderBlock {DIV} at (45,-1) size 95x14
>+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x12 clip at (17,70) size 45x12
>   RenderBlock {DIV} at (0,0) size 46x12
> layer at (178,70) size 140x12 scrollHeight 13
>   RenderFlexibleBox {DIV} at (6,3) size 141x13
>-    RenderBlock {DIV} at (45,-1) size 95x14
>+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x12 clip at (178,70) size 45x12
>   RenderBlock {DIV} at (0,0) size 46x12
> layer at (337,70) size 300x12 scrollHeight 13
>   RenderFlexibleBox {DIV} at (6,3) size 301x13
>-    RenderBlock {DIV} at (205,-1) size 95x14
>+    RenderBlock {DIV} at (205,-1) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x12 clip at (337,70) size 205x12
>   RenderBlock {DIV} at (0,0) size 206x12
> layer at (654,57) size 20x12 scrollWidth 94 scrollHeight 26
>   RenderFlexibleBox {DIV} at (6,3) size 21x13
>-    RenderBlock {DIV} at (0,12) size 20x14
>+    RenderBlock {DIV} at (0,12) size 20x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (654,57) size 20x12
>   RenderBlock {DIV} at (0,0) size 20x12
> layer at (17,148) size 140x12 scrollHeight 13
>   RenderFlexibleBox {DIV} at (6,47) size 141x13
>-    RenderBlock {DIV} at (45,-1) size 95x14
>+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (17,148) size 46x12 backgroundClip at (17,148) size 45x12 clip at (17,148) size 45x12
>   RenderBlock {DIV} at (0,0) size 46x12
> layer at (176,135) size 20x12 scrollWidth 94 scrollHeight 26
>   RenderFlexibleBox {DIV} at (6,47) size 21x13
>-    RenderBlock {DIV} at (0,12) size 20x14
>+    RenderBlock {DIV} at (0,12) size 20x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (176,135) size 20x12
>   RenderBlock {DIV} at (0,0) size 20x12
> layer at (215,148) size 140x12 scrollHeight 13
>   RenderFlexibleBox {DIV} at (6,3) size 141x13
>-    RenderBlock {DIV} at (45,-1) size 95x14
>+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x14
>         text run at (6,0) width 89: "Strong Password"
> layer at (215,148) size 46x12 backgroundClip at (215,148) size 45x12 clip at (215,148) size 45x12
>@@ -98,5 +98,3 @@ layer at (176,135) size 20x12 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 20x12 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x12
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (215,148) size 46x12 backgroundClip at (215,148) size 45x12 clip at (215,148) size 45x12
>-  RenderBlock {DIV} at (0,0) size 46x12 [color=#00000099]
>diff --git a/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt b/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>index d2bb0d1a955c83eaab7e150f8caa7a3d8c6ca7cf..6337d2e872b9b5a1ea7c45920800a5ff77f2f7d1 100644
>--- a/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>+++ b/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
>@@ -69,8 +69,8 @@ layer at (179,73) size 152x13 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 152x13 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x13
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (343,73) size 300x13
>-  RenderBlock {DIV} at (0,0) size 300x13 [color=#00000099]
>+layer at (343,73) size 284x13
>+  RenderBlock {DIV} at (0,0) size 284x13 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x13
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
> layer at (653,73) size 20x13 scrollWidth 284
>@@ -85,5 +85,3 @@ layer at (177,138) size 20x13 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 20x13 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x13
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (209,137) size 152x13
>-  RenderBlock {DIV} at (0,0) size 152x13 [color=#00000099]
>diff --git a/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt b/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>index 3983771e4bee456c3bade76efe43199ed0dc2a01..413bbd5021b36e6fb287e5828c174e9b09227e7d 100644
>--- a/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>+++ b/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
>@@ -27,49 +27,49 @@ layer at (0,0) size 800x213
>         RenderTextControl {INPUT} at (198,92) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
> layer at (13,68) size 152x13
>   RenderFlexibleBox {DIV} at (3,3) size 152x13
>-    RenderBlock {DIV} at (57,0) size 95x13
>+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (13,68) size 58x13
>   RenderBlock {DIV} at (0,0) size 58x13
> layer at (179,68) size 152x13
>   RenderFlexibleBox {DIV} at (3,3) size 152x13
>-    RenderBlock {DIV} at (57,0) size 95x13
>+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (179,68) size 58x13
>   RenderBlock {DIV} at (0,0) size 58x13
> layer at (343,68) size 300x13
>   RenderFlexibleBox {DIV} at (3,3) size 300x13
>-    RenderBlock {DIV} at (205,0) size 95x13
>+    RenderBlock {DIV} at (205,0) size 95x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (343,68) size 206x13
>   RenderBlock {DIV} at (0,0) size 206x13
> layer at (653,55) size 20x13 scrollWidth 94 scrollHeight 26
>   RenderFlexibleBox {DIV} at (3,3) size 20x13
>-    RenderBlock {DIV} at (0,13) size 20x13
>+    RenderBlock {DIV} at (0,13) size 20x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (653,55) size 20x13
>   RenderBlock {DIV} at (0,0) size 20x13
> layer at (13,102) size 152x100
>   RenderFlexibleBox {DIV} at (3,3) size 152x100
>-    RenderBlock {DIV} at (57,43) size 95x14
>+    RenderBlock {DIV} at (57,43) size 95x14 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (13,146) size 58x13
>   RenderBlock {DIV} at (0,43) size 58x14
> layer at (177,133) size 20x13 scrollWidth 94 scrollHeight 26
>   RenderFlexibleBox {DIV} at (3,46) size 20x14
>-    RenderBlock {DIV} at (0,13) size 20x13
>+    RenderBlock {DIV} at (0,13) size 20x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (177,133) size 20x13
>   RenderBlock {DIV} at (0,0) size 20x13
> layer at (209,145) size 152x13
>   RenderFlexibleBox {DIV} at (3,3) size 152x13
>-    RenderBlock {DIV} at (57,0) size 95x13
>+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
>       RenderText {#text} at (6,0) size 89x13
>         text run at (6,0) width 89: "Strong Password"
> layer at (209,145) size 58x13
>@@ -98,5 +98,3 @@ layer at (177,133) size 20x13 scrollWidth 284
>   RenderBlock {DIV} at (0,0) size 20x13 [color=#00000099]
>     RenderText {#text} at (0,0) size 284x13
>       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
>-layer at (209,145) size 58x13
>-  RenderBlock {DIV} at (0,0) size 58x13 [color=#00000099]

Flags:

bfulgham: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 186239: 341853 | 341856 | 341857