Title: [153695] trunk/Source/WebCore
Revision
153695
Author
[email protected]
Date
2013-08-03 21:13:03 -0700 (Sat, 03 Aug 2013)

Log Message

Refine the unavailable plug-in indicator
https://bugs.webkit.org/show_bug.cgi?id=119400
<rdar://problem/14616012>

Reviewed by Oliver Hunt.

Add a border, flip the text and background colors, and make the indicator
much higher contrast, to be more visible on a variety of sites.
Also, refine the arrow to be less blocky and inlaid inside a circle.

* rendering/RenderEmbeddedObject.cpp:
(WebCore::replacementTextRoundedRectPressedColor):
(WebCore::replacementTextRoundedRectColor):
(WebCore::replacementTextColor):
(WebCore::unavailablePluginBorderColor):
(WebCore::drawReplacementArrow):
(WebCore::RenderEmbeddedObject::paintReplaced):
(WebCore::RenderEmbeddedObject::getReplacementTextGeometry):
(WebCore::RenderEmbeddedObject::unavailablePluginIndicatorBounds):
(WebCore::RenderEmbeddedObject::isInUnavailablePluginIndicator):
* rendering/RenderEmbeddedObject.h:

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (153694 => 153695)


--- trunk/Source/WebCore/ChangeLog	2013-08-04 04:00:03 UTC (rev 153694)
+++ trunk/Source/WebCore/ChangeLog	2013-08-04 04:13:03 UTC (rev 153695)
@@ -1,3 +1,27 @@
+2013-08-03  Tim Horton  <[email protected]>
+
+        Refine the unavailable plug-in indicator
+        https://bugs.webkit.org/show_bug.cgi?id=119400
+        <rdar://problem/14616012>
+
+        Reviewed by Oliver Hunt.
+
+        Add a border, flip the text and background colors, and make the indicator
+        much higher contrast, to be more visible on a variety of sites.
+        Also, refine the arrow to be less blocky and inlaid inside a circle.
+
+        * rendering/RenderEmbeddedObject.cpp:
+        (WebCore::replacementTextRoundedRectPressedColor):
+        (WebCore::replacementTextRoundedRectColor):
+        (WebCore::replacementTextColor):
+        (WebCore::unavailablePluginBorderColor):
+        (WebCore::drawReplacementArrow):
+        (WebCore::RenderEmbeddedObject::paintReplaced):
+        (WebCore::RenderEmbeddedObject::getReplacementTextGeometry):
+        (WebCore::RenderEmbeddedObject::unavailablePluginIndicatorBounds):
+        (WebCore::RenderEmbeddedObject::isInUnavailablePluginIndicator):
+        * rendering/RenderEmbeddedObject.h:
+
 2013-08-03  Yoav Weiss  <[email protected]>
 
         PreloadScanner preloads external CSS with non-matching media attribute

Modified: trunk/Source/WebCore/rendering/RenderEmbeddedObject.cpp (153694 => 153695)


--- trunk/Source/WebCore/rendering/RenderEmbeddedObject.cpp	2013-08-04 04:00:03 UTC (rev 153694)
+++ trunk/Source/WebCore/rendering/RenderEmbeddedObject.cpp	2013-08-04 04:13:03 UTC (rev 153695)
@@ -66,32 +66,39 @@
 
 using namespace HTMLNames;
 
-static const float replacementTextRoundedRectHeight = 18;
-static const float replacementTextRoundedRectLeftRightTextMargin = 6;
-static const float replacementTextRoundedRectBottomTextPadding = 1;
-static const float replacementTextRoundedRectOpacity = 0.8f;
-static const float replacementTextRoundedRectRadius = 5;
+static const float replacementTextRoundedRectHeight = 22;
+static const float replacementTextRoundedRectLeftTextMargin = 10;
+static const float replacementTextRoundedRectRightTextMargin = 10;
+static const float replacementTextRoundedRectRightTextMarginWithArrow = 5;
+static const float replacementTextRoundedRectRadius = 11;
 static const float replacementArrowLeftMargin = -4;
 static const float replacementArrowPadding = 4;
+static const float replacementArrowCirclePadding = 3;
 
 static const Color& replacementTextRoundedRectPressedColor()
 {
-    static const Color pressed(205, 205, 205);
+    static const Color pressed(105, 105, 105, 242);
     return pressed;
 }
 
 static const Color& replacementTextRoundedRectColor()
 {
-    static const Color standard(221, 221, 221);
+    static const Color standard(125, 125, 125, 242);
     return standard;
 }
 
 static const Color& replacementTextColor()
 {
-    static const Color standard(102, 102, 102);
+    static const Color standard(240, 240, 240, 255);
     return standard;
 }
 
+static const Color& unavailablePluginBorderColor()
+{
+    static const Color standard(255, 255, 255, 216);
+    return standard;
+}
+
 RenderEmbeddedObject::RenderEmbeddedObject(Element* element)
     : RenderPart(element)
     , m_hasFallbackContent(false)
@@ -236,6 +243,29 @@
     RenderPart::paint(paintInfo, paintOffset);
 }
 
+static void drawReplacementArrow(GraphicsContext* context, const FloatRect& insideRect)
+{
+    GraphicsContextStateSaver stateSaver(*context);
+
+    FloatRect rect(insideRect);
+    rect.inflate(-replacementArrowPadding);
+
+    FloatPoint center(rect.center());
+    FloatPoint arrowTip(rect.maxX(), center.y());
+
+    context->setStrokeThickness(2);
+    context->setLineCap(RoundCap);
+    context->setLineJoin(RoundJoin);
+
+    Path path;
+    path.moveTo(FloatPoint(rect.x(), center.y()));
+    path.addLineTo(arrowTip);
+    path.addLineTo(FloatPoint(center.x(), rect.y()));
+    path.moveTo(arrowTip);
+    path.addLineTo(FloatPoint(center.x(), rect.maxY()));
+    context->strokePath(path);
+}
+
 void RenderEmbeddedObject::paintReplaced(PaintInfo& paintInfo, const LayoutPoint& paintOffset)
 {
     if (!showsUnavailablePluginIndicator())
@@ -249,26 +279,49 @@
         return;
 
     FloatRect contentRect;
-    Path path;
+    FloatRect indicatorRect;
     FloatRect replacementTextRect;
     FloatRect arrowRect;
     Font font;
     TextRun run("");
     float textWidth;
-    if (!getReplacementTextGeometry(paintOffset, contentRect, path, replacementTextRect, arrowRect, font, run, textWidth))
+    if (!getReplacementTextGeometry(paintOffset, contentRect, indicatorRect, replacementTextRect, arrowRect, font, run, textWidth))
         return;
 
+    Path background;
+    background.addRoundedRect(indicatorRect, FloatSize(replacementTextRoundedRectRadius, replacementTextRoundedRectRadius));
+
     GraphicsContextStateSaver stateSaver(*context);
     context->clip(contentRect);
-    context->setAlpha(replacementTextRoundedRectOpacity);
     context->setFillColor(m_unavailablePluginIndicatorIsPressed ? replacementTextRoundedRectPressedColor() : replacementTextRoundedRectColor(), style()->colorSpace());
-    context->fillPath(path);
+    context->fillPath(background);
 
+    Path strokePath;
+    FloatRect strokeRect(indicatorRect);
+    strokeRect.inflate(1);
+    strokePath.addRoundedRect(strokeRect, FloatSize(replacementTextRoundedRectRadius + 1, replacementTextRoundedRectRadius + 1));
+
+    context->setStrokeColor(unavailablePluginBorderColor(), style()->colorSpace());
+    context->setStrokeThickness(2);
+    context->strokePath(strokePath);
+
     const FontMetrics& fontMetrics = font.fontMetrics();
-    float labelX = roundf(replacementTextRect.location().x() + (replacementTextRect.size().width() - textWidth) / 2);
+    float labelX = roundf(replacementTextRect.location().x() + replacementTextRoundedRectLeftTextMargin);
     float labelY = roundf(replacementTextRect.location().y() + (replacementTextRect.size().height() - fontMetrics.height()) / 2 + fontMetrics.ascent());
     context->setFillColor(replacementTextColor(), style()->colorSpace());
     context->drawBidiText(font, run, FloatPoint(labelX, labelY));
+
+    if (shouldUnavailablePluginMessageBeButton(document(), m_pluginUnavailabilityReason)) {
+        arrowRect.inflate(-replacementArrowCirclePadding);
+
+        context->beginTransparencyLayer(1.0);
+        context->setFillColor(replacementTextColor(), style()->colorSpace());
+        context->fillEllipse(arrowRect);
+
+        context->setCompositeOperation(CompositeClear);
+        drawReplacementArrow(context, arrowRect);
+        context->endTransparencyLayer();
+    }
 }
 
 void RenderEmbeddedObject::setUnavailablePluginIndicatorIsHidden(bool hidden)
@@ -278,28 +331,10 @@
     repaint();
 }
 
-static void addReplacementArrowPath(Path& path, const FloatRect& insideRect)
+bool RenderEmbeddedObject::getReplacementTextGeometry(const LayoutPoint& accumulatedOffset, FloatRect& contentRect, FloatRect& indicatorRect, FloatRect& replacementTextRect, FloatRect& arrowRect, Font& font, TextRun& run, float& textWidth) const
 {
-    FloatRect rect(insideRect);
-    rect.inflate(-replacementArrowPadding);
+    bool includesArrow = shouldUnavailablePluginMessageBeButton(document(), m_pluginUnavailabilityReason);
 
-    FloatPoint center = rect.center();
-    FloatSize arrowEdge(rect.width() / 2, rect.height() / 3);
-    FloatSize arrowHorizontalEdge(arrowEdge.width(), 0);
-    FloatSize arrowVerticalEdge(0, arrowEdge.height());
-
-    path.moveTo(FloatPoint(floorf(center.x()), floorf(rect.y())));
-    path.addLineTo(FloatPoint(floorf(center.x()), floorf(rect.y() + arrowEdge.height())));
-    path.addLineTo(FloatPoint(ceilf(center.x() - arrowEdge.width()), floorf(rect.y() + arrowEdge.height())));
-    path.addLineTo(FloatPoint(ceilf(center.x() - arrowEdge.width()), ceilf(rect.y() + arrowEdge.height() + arrowEdge.height())));
-    path.addLineTo(FloatPoint(floorf(center.x()), ceilf(rect.y() + arrowEdge.height() + arrowEdge.height())));
-    path.addLineTo(FloatPoint(floorf(center.x()), ceilf(rect.y() + arrowEdge.height() + arrowEdge.height() + arrowEdge.height())));
-    path.addLineTo(FloatPoint(ceilf(center.x() + arrowEdge.width()), center.y()));
-    path.closeSubpath();
-}
-
-bool RenderEmbeddedObject::getReplacementTextGeometry(const LayoutPoint& accumulatedOffset, FloatRect& contentRect, Path& path, FloatRect& replacementTextRect, FloatRect& arrowRect, Font& font, TextRun& run, float& textWidth) const
-{
     contentRect = contentBoxRect();
     contentRect.moveBy(roundedIntPoint(accumulatedOffset));
 
@@ -311,50 +346,42 @@
     if (!settings)
         return false;
     fontDescription.setRenderingMode(settings->fontRenderingMode());
-    fontDescription.setComputedSize(fontDescription.specifiedSize());
+    fontDescription.setComputedSize(12);
     font = Font(fontDescription, 0, 0);
     font.update(0);
 
     run = TextRun(m_unavailablePluginReplacementText);
     textWidth = font.width(run);
 
-    replacementTextRect.setSize(FloatSize(textWidth + replacementTextRoundedRectLeftRightTextMargin * 2, replacementTextRoundedRectHeight));
+    replacementTextRect.setSize(FloatSize(textWidth + replacementTextRoundedRectLeftTextMargin + (includesArrow ? replacementTextRoundedRectRightTextMarginWithArrow : replacementTextRoundedRectRightTextMargin), replacementTextRoundedRectHeight));
     float x = (contentRect.size().width() / 2 - replacementTextRect.size().width() / 2) + contentRect.location().x();
     float y = (contentRect.size().height() / 2 - replacementTextRect.size().height() / 2) + contentRect.location().y();
     replacementTextRect.setLocation(FloatPoint(x, y));
 
-    replacementTextRect.setHeight(replacementTextRect.height() + replacementTextRoundedRectBottomTextPadding);
+    indicatorRect = replacementTextRect;
 
-    FloatRect indicatorRect(replacementTextRect);
-
     // Expand the background rect to include the arrow, if it will be used.
-    if (shouldUnavailablePluginMessageBeButton(document(), m_pluginUnavailabilityReason)) {
+    if (includesArrow) {
         arrowRect = indicatorRect;
         arrowRect.setX(ceilf(arrowRect.maxX() + replacementArrowLeftMargin));
         arrowRect.setWidth(arrowRect.height());
         indicatorRect.unite(arrowRect);
-        arrowRect.inflate(-0.5);
     }
 
-    path.addRoundedRect(indicatorRect, FloatSize(replacementTextRoundedRectRadius, replacementTextRoundedRectRadius));
-
-    if (shouldUnavailablePluginMessageBeButton(document(), m_pluginUnavailabilityReason))
-        addReplacementArrowPath(path, arrowRect);
-
     return true;
 }
 
 LayoutRect RenderEmbeddedObject::unavailablePluginIndicatorBounds(const LayoutPoint& accumulatedOffset) const
 {
     FloatRect contentRect;
-    Path path;
+    FloatRect indicatorRect;
     FloatRect replacementTextRect;
     FloatRect arrowRect;
     Font font;
     TextRun run("", 0);
     float textWidth;
-    if (getReplacementTextGeometry(accumulatedOffset, contentRect, path, replacementTextRect, arrowRect, font, run, textWidth))
-        return LayoutRect(path.boundingRect());
+    if (getReplacementTextGeometry(accumulatedOffset, contentRect, indicatorRect, replacementTextRect, arrowRect, font, run, textWidth))
+        return LayoutRect(indicatorRect);
 
     return LayoutRect();
 }
@@ -560,14 +587,14 @@
 bool RenderEmbeddedObject::isInUnavailablePluginIndicator(const LayoutPoint& point) const
 {
     FloatRect contentRect;
-    Path path;
+    FloatRect indicatorRect;
     FloatRect replacementTextRect;
     FloatRect arrowRect;
     Font font;
     TextRun run("");
     float textWidth;
-    return getReplacementTextGeometry(IntPoint(), contentRect, path, replacementTextRect, arrowRect, font, run, textWidth)
-        && (path.contains(point) || arrowRect.contains(point));
+    return getReplacementTextGeometry(IntPoint(), contentRect, indicatorRect, replacementTextRect, arrowRect, font, run, textWidth)
+        && indicatorRect.contains(point);
 }
 
 bool RenderEmbeddedObject::isInUnavailablePluginIndicator(MouseEvent* event) const

Modified: trunk/Source/WebCore/rendering/RenderEmbeddedObject.h (153694 => 153695)


--- trunk/Source/WebCore/rendering/RenderEmbeddedObject.h	2013-08-04 04:00:03 UTC (rev 153694)
+++ trunk/Source/WebCore/rendering/RenderEmbeddedObject.h	2013-08-04 04:13:03 UTC (rev 153695)
@@ -96,7 +96,7 @@
     void setUnavailablePluginIndicatorIsPressed(bool);
     bool isInUnavailablePluginIndicator(MouseEvent*) const;
     bool isInUnavailablePluginIndicator(const LayoutPoint&) const;
-    bool getReplacementTextGeometry(const LayoutPoint& accumulatedOffset, FloatRect& contentRect, Path&, FloatRect& replacementTextRect, FloatRect& arrowRect, Font&, TextRun&, float& textWidth) const;
+    bool getReplacementTextGeometry(const LayoutPoint& accumulatedOffset, FloatRect& contentRect, FloatRect& indicatorRect, FloatRect& replacementTextRect, FloatRect& arrowRect, Font&, TextRun&, float& textWidth) const;
     LayoutRect unavailablePluginIndicatorBounds(const LayoutPoint&) const;
 
     virtual bool canHaveChildren() const OVERRIDE FINAL;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to