Changeset 92585 in webkit


Ignore:
Timestamp:
Aug 8, 2011 12:25:35 AM (13 years ago)
Author:
tkent@chromium.org
Message:

[Chromium] Make form validation bubble fit with Chrome UI style
​https://bugs.webkit.org/show_bug.cgi?id=65359

Reviewed by Hajime Morita.

Source/WebCore:

Change the appearance of validation message bubble for
Chromium. Basically it doesn't change for other ports.

  • Introduce a new element to put an icon, and enclose it and the

message text by a flexible box.

  • Repesent the message text by two elements. One for the heading,

another for the remaining.

  • Introduce themeChromium.css
  • WebCore.gyp/WebCore.gyp: Add themeChromium.css.
  • css/html.css:

(::-webkit-validation-bubble-message): Make this a flexible box container.
(::-webkit-validation-bubble-text-block): Takes flexibility.
(::-webkit-validation-bubble-heading):
Make the content bold because we removed <b></b>.

  • css/themeChromium.css: Added.

(::-webkit-validation-bubble):
(::-webkit-validation-bubble-message):
(::-webkit-validation-bubble-arrow):
(::-webkit-validation-bubble-arrow-clipper):
(::-webkit-validation-bubble-icon):
(::-webkit-validation-bubble-heading):
(::-webkit-validation-bubble-body):

  • html/ValidationMessage.cpp:

(WebCore::ValidationMessage::setMessageDOMAndStartTimer):
Sets the text into m_messageHeading and m_messageBody, instead of m_bubbleMessage.
Use ASSERT_NO_EXCEPTION.
(WebCore::ValidationMessage::buildBubbleTree):
Build the new structure, and use ASSERT_NO_EXCEPTION.
(WebCore::ValidationMessage::deleteBubbleTree):
Clear m_messageHeading and m_messageBody.

  • html/ValidationMessage.h:
  • rendering/RenderThemeChromiumMac.h: Add extraDefaultStyleSheet().
  • rendering/RenderThemeChromiumMac.mm:

(WebCore::RenderThemeChromiumMac::extraDefaultStyleSheet): Append themeChromium.css.

  • rendering/RenderThemeChromiumSkia.cpp:

(WebCore::RenderThemeChromiumSkia::extraDefaultStyleSheet): Append themeChromium.css.

LayoutTests:

  • fast/forms/validation-message-appearance.html: Need to wait for a litle because of image loading.
  • platform/chromium-mac/fast/forms/validation-message-appearance-expected.png:
  • platform/chromium-mac/fast/forms/validation-message-appearance-expected.txt:
  • platform/chromium/test_expectations.txt:
  • platform/mac/fast/forms/validation-message-appearance-expected.png:
  • platform/mac/fast/forms/validation-message-appearance-expected.txt:
Location:
trunk
Files:
2 added
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r92583 r92585  
     12011-07-28  Kent Tamura  <tkent@chromium.org>
     2
     3        [Chromium] Make form validation bubble fit with Chrome UI style
     4        https://bugs.webkit.org/show_bug.cgi?id=65359
     5
     6        Reviewed by Hajime Morita.
     7
     8        * fast/forms/validation-message-appearance.html:
     9          Need to wait for a litle because of image loading.
     10        * platform/chromium-mac/fast/forms/validation-message-appearance-expected.png:
     11        * platform/chromium-mac/fast/forms/validation-message-appearance-expected.txt:
     12        * platform/chromium/test_expectations.txt:
     13        * platform/mac/fast/forms/validation-message-appearance-expected.png:
     14        * platform/mac/fast/forms/validation-message-appearance-expected.txt:
     15
    1162011-08-07  Shinichiro Hamaji  <hamaji@chromium.org>
    217

  • trunk/LayoutTests/fast/forms/validation-message-appearance.html

    r82386 r92585  
    1717if (window.layoutTestController) {
    1818    layoutTestController.waitUntilDone();
    19     setTimeout(function() { layoutTestController.notifyDone(); }, 0);
     19    setTimeout(function() { layoutTestController.notifyDone(); }, 10);
    2020}
    2121</script>

  • trunk/LayoutTests/platform/chromium/test_expectations.txt

    r92583 r92585  
    35283528BUGWK63115 : fast/css/font-face-in-shadow-DOM.html = PASS IMAGE+TEXT
    35293529
     3530// Need to update baseline files.
     3531BUGWK65359 : fast/forms/validation-message-appearance.html = FAIL
    35303532
    35313533// This test ASSERTs in skia since it was added.

  • trunk/LayoutTests/platform/mac/fast/forms/validation-message-appearance-expected.txt

    r87067 r92585  
    2020  RenderBlock {DIV} at (0,0) size 220x16
    2121layer at (10,41) size 220x84
    22   RenderBlock (relative positioned) zI: 2147483644 {DIV} at (0,16) size 220x84 [border: (2px solid #440000)]
    23     RenderInline {B} at (0,0) size 93x16
    24       RenderText {#text} at (10,10) size 93x16
    25         text run at (10,10) width 93: "value missing"
    26     RenderBR {BR} at (102,10) size 1x16
    27     RenderText zI: 2147483644 {#text} at (10,26) size 150x16
    28       text run at (10,26) width 150: "Needs at least 8 letters."
    29     RenderBR {BR} at (159,26) size 1x16
    30     RenderText zI: 2147483644 {#text} at (10,42) size 177x32
    31       text run at (10,42) width 177: "Should not be identical with"
    32       text run at (10,58) width 139: "the current password."
     22  RenderDeprecatedFlexibleBox (relative positioned) zI: 2147483644 {DIV} at (0,16) size 220x84 [border: (2px solid #440000)]
     23    RenderBlock {DIV} at (10,10) size 0x64
     24    RenderBlock {DIV} at (10,10) size 200x64
     25      RenderBlock {DIV} at (0,0) size 200x16
     26        RenderText {#text} at (0,0) size 93x16
     27          text run at (0,0) width 93: "value missing"
     28      RenderBlock {DIV} at (0,16) size 200x48
     29        RenderText {#text} at (0,0) size 150x16
     30          text run at (0,0) width 150: "Needs at least 8 letters."
     31        RenderBR {BR} at (149,0) size 1x16
     32        RenderText {#text} at (0,16) size 177x32
     33          text run at (0,16) width 177: "Should not be identical with"
     34          text run at (0,32) width 139: "the current password."
    3335layer at (42,29) size 18x18 backgroundClip at (10,29) size 220x16 clip at (10,29) size 220x16 outlineClip at (10,29) size 220x16
    3436  RenderBlock (relative positioned) zI: 2147483645 {DIV} at (0,0) size 18x18 [bgcolor=#F8ECEC] [border: (2px solid #440000) none (2px solid #440000)]

  • trunk/Source/WebCore/ChangeLog

    r92582 r92585  
     12011-07-28  Kent Tamura  <tkent@chromium.org>
     2
     3        [Chromium] Make form validation bubble fit with Chrome UI style
     4        https://bugs.webkit.org/show_bug.cgi?id=65359
     5
     6        Reviewed by Hajime Morita.
     7
     8        Change the appearance of validation message bubble for
     9        Chromium. Basically it doesn't change for other ports.
     10
     11        - Introduce a new element to put an icon, and enclose it and the
     12        message text by a flexible box.
     13        - Repesent the message text by two elements. One for the heading,
     14        another for the remaining.
     15
     16        - Introduce themeChromium.css
     17
     18        * WebCore.gyp/WebCore.gyp: Add themeChromium.css.
     19        * css/html.css:
     20        (::-webkit-validation-bubble-message): Make this a flexible box container.
     21        (::-webkit-validation-bubble-text-block): Takes flexibility.
     22        (::-webkit-validation-bubble-heading):
     23        Make the content bold because we removed <b></b>.
     24        * css/themeChromium.css: Added.
     25        (::-webkit-validation-bubble):
     26        (::-webkit-validation-bubble-message):
     27        (::-webkit-validation-bubble-arrow):
     28        (::-webkit-validation-bubble-arrow-clipper):
     29        (::-webkit-validation-bubble-icon):
     30        (::-webkit-validation-bubble-heading):
     31        (::-webkit-validation-bubble-body):
     32        * html/ValidationMessage.cpp:
     33        (WebCore::ValidationMessage::setMessageDOMAndStartTimer):
     34        Sets the text into m_messageHeading and m_messageBody, instead of m_bubbleMessage.
     35        Use ASSERT_NO_EXCEPTION.
     36        (WebCore::ValidationMessage::buildBubbleTree):
     37        Build the new structure, and use ASSERT_NO_EXCEPTION.
     38        (WebCore::ValidationMessage::deleteBubbleTree):
     39        Clear m_messageHeading and m_messageBody.
     40        * html/ValidationMessage.h:
     41        * rendering/RenderThemeChromiumMac.h: Add extraDefaultStyleSheet().
     42        * rendering/RenderThemeChromiumMac.mm:
     43        (WebCore::RenderThemeChromiumMac::extraDefaultStyleSheet): Append themeChromium.css.
     44        * rendering/RenderThemeChromiumSkia.cpp:
     45        (WebCore::RenderThemeChromiumSkia::extraDefaultStyleSheet): Append themeChromium.css.
     46
    1472011-08-07  Keishi Hattori  <keishi@webkit.org>
    248

  • trunk/Source/WebCore/WebCore.gyp/WebCore.gyp

    r92375 r92585  
    673673              '../css/quirks.css',
    674674              '../css/view-source.css',
     675              '../css/themeChromium.css', # Chromium only.
    675676              '../css/themeChromiumLinux.css', # Chromium only.
    676677              '../css/themeChromiumSkia.css',  # Chromium only.

  • trunk/Source/WebCore/css/html.css

    r91345 r92585  
    725725
    726726::-webkit-validation-bubble-message {
    727     display: block;
     727    display: -webkit-box;
    728728    position: relative;
    729729    top: -4px;
    … …  
    744744}
    745745
     746::-webkit-validation-bubble-text-block {
     747    -webkit-box-flex: 1;
     748}
     749
     750::-webkit-validation-bubble-heading {
     751    font-weight: bold;
     752}
     753
    746754::-webkit-validation-bubble-arrow {
    747755    display: inline-block;

  • trunk/Source/WebCore/html/ValidationMessage.cpp

    r91982 r92585  
    3535#include "CSSStyleSelector.h"
    3636#include "CSSValueKeywords.h"
     37#include "ExceptionCodePlaceholder.h"
    3738#include "FormAssociatedElement.h"
    3839#include "HTMLBRElement.h"
    … …  
    8182void ValidationMessage::setMessageDOMAndStartTimer(Timer<ValidationMessage>*)
    8283{
    83     ASSERT(m_bubbleMessage);
    84     m_bubbleMessage->removeAllChildren();
     84    ASSERT(m_messageHeading);
     85    ASSERT(m_messageBody);
     86    m_messageHeading->removeAllChildren();
     87    m_messageBody->removeAllChildren();
    8588    Vector<String> lines;
    8689    m_message.split('\n', lines);
    87     Document* doc = m_bubbleMessage->document();
    88     ExceptionCode ec = 0;
     90    Document* doc = m_messageHeading->document();
    8991    for (unsigned i = 0; i < lines.size(); ++i) {
    9092        if (i) {
    91             m_bubbleMessage->appendChild(HTMLBRElement::create(doc), ec);
    92             m_bubbleMessage->appendChild(Text::create(doc, lines[i]), ec);
    93         } else {
    94             RefPtr<HTMLElement> bold = HTMLElement::create(bTag, doc);
    95             bold->setInnerText(lines[i], ec);
    96             m_bubbleMessage->appendChild(bold.release(), ec);
    97         }
     93            m_messageBody->appendChild(Text::create(doc, lines[i]), ASSERT_NO_EXCEPTION);
     94            if (i < lines.size() - 1)
     95                m_messageBody->appendChild(HTMLBRElement::create(doc), ASSERT_NO_EXCEPTION);
     96        } else
     97            m_messageHeading->setInnerText(lines[i], ASSERT_NO_EXCEPTION);
    9898    }
    9999
    … …  
    150150    m_bubble->appendChild(clipper.release(), ec);
    151151    ASSERT(!ec);
    152     m_bubbleMessage = HTMLDivElement::create(doc);
    153     m_bubbleMessage->setShadowPseudoId("-webkit-validation-bubble-message");
    154     m_bubble->appendChild(m_bubbleMessage, ec);
    155     ASSERT(!ec);
     152
     153    RefPtr<HTMLElement> message = HTMLDivElement::create(doc);
     154    message->setShadowPseudoId("-webkit-validation-bubble-message");
     155    RefPtr<HTMLElement> icon = HTMLDivElement::create(doc);
     156    icon->setShadowPseudoId("-webkit-validation-bubble-icon");
     157    message->appendChild(icon.release(), ASSERT_NO_EXCEPTION);
     158    RefPtr<HTMLElement> textBlock = HTMLDivElement::create(doc);
     159    textBlock->setShadowPseudoId("-webkit-validation-bubble-text-block");
     160    m_messageHeading = HTMLDivElement::create(doc);
     161    m_messageHeading->setShadowPseudoId("-webkit-validation-bubble-heading");
     162    textBlock->appendChild(m_messageHeading, ASSERT_NO_EXCEPTION);
     163    m_messageBody = HTMLDivElement::create(doc);
     164    m_messageBody->setShadowPseudoId("-webkit-validation-bubble-body");
     165    textBlock->appendChild(m_messageBody, ASSERT_NO_EXCEPTION);
     166    message->appendChild(textBlock.release(), ASSERT_NO_EXCEPTION);
     167    m_bubble->appendChild(message.release(), ASSERT_NO_EXCEPTION);
    156168
    157169    setMessageDOMAndStartTimer();
    … …  
    170182{
    171183    if (m_bubble) {
    172         m_bubbleMessage = 0;
     184        m_messageHeading = 0;
     185        m_messageBody = 0;
    173186        HTMLElement* host = toHTMLElement(m_element);
    174187        ExceptionCode ec;

  • trunk/Source/WebCore/html/ValidationMessage.h

    r76248 r92585  
    6262    OwnPtr<Timer<ValidationMessage> > m_timer;
    6363    RefPtr<HTMLElement> m_bubble;
    64     RefPtr<HTMLElement> m_bubbleMessage;
     64    RefPtr<HTMLElement> m_messageHeading;
     65    RefPtr<HTMLElement> m_messageBody;
    6566};
    6667

  • trunk/Source/WebCore/rendering/RenderThemeChromiumMac.h

    r88405 r92585  
    6060private:
    6161    virtual void updateActiveState(NSCell*, const RenderObject*);
     62    virtual String extraDefaultStyleSheet();
    6263};
    6364

  • trunk/Source/WebCore/rendering/RenderThemeChromiumMac.mm

    r88405 r92585  
    161161#endif
    162162
     163String RenderThemeChromiumMac::extraDefaultStyleSheet()
     164{
     165    return RenderThemeMac::extraDefaultStyleSheet() +
     166           String(themeChromiumUserAgentStyleSheet, sizeof(themeChromiumUserAgentStyleSheet));
     167}
     168
     169
    163170bool RenderThemeChromiumMac::paintMediaVolumeSliderContainer(RenderObject* object, const PaintInfo& paintInfo, const IntRect& rect)
    164171{

  • trunk/Source/WebCore/rendering/RenderThemeChromiumSkia.cpp

    r88405 r92585  
    9898{
    9999    return String(themeWinUserAgentStyleSheet, sizeof(themeWinUserAgentStyleSheet)) +
    100            String(themeChromiumSkiaUserAgentStyleSheet, sizeof(themeChromiumSkiaUserAgentStyleSheet));
     100           String(themeChromiumSkiaUserAgentStyleSheet, sizeof(themeChromiumSkiaUserAgentStyleSheet)) +
     101           String(themeChromiumUserAgentStyleSheet, sizeof(themeChromiumUserAgentStyleSheet));
    101102}
    102103
Note: See TracChangeset for help on using the changeset viewer.