Change visual look of placeholder
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Nov 2012 22:42:59 +0000 (22:42 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Nov 2012 22:42:59 +0000 (22:42 +0000)
https://bugs.webkit.org/show_bug.cgi?id=102149
<rdar://problem/12695566>

Reviewed by Darin Adler.

Move the button to the lower-right corner. Move the theming into
RenderSnapshottedPlugin for now. Eventually we will want to migrate to using the
shadow DOM instead, and the metrics of the button are needed for click passthrough.

* Resources/startButton.png: Added.
* Resources/startButton@2x.png: Added.
* Resources/startButtonPressed.png: Added.
* Resources/startButtonPressed@2x.png: Added.
* WebCore.xcodeproj/project.pbxproj: Add button images.

Maintain variables to track whether the mouse is over the button, and the rect
for the button. If the user clicks in the rect, we render a pressed button.
* rendering/RenderSnapshottedPlugIn.cpp:
(WebCore): Add named constant for bottom and right padding of the button.
(WebCore::RenderSnapshottedPlugIn::RenderSnapshottedPlugIn):
(WebCore::RenderSnapshottedPlugIn::paintReplaced):
(WebCore::startButtonImage): Returns button image.
(WebCore::startButtonPressedImage): Returns pressed button image.
(WebCore::RenderSnapshottedPlugIn::paintButton): Draw the button image in the
lower right hand corner, but only if we are active or hovered.
(WebCore::RenderSnapshottedPlugIn::repaintButton): Stubbed to call repaint().
(WebCore::RenderSnapshottedPlugIn::handleEvent): Repaint the button if we are
hovering over the plugin rect. With a mouse down event, calculate whether the
mouse position is within the button rect.
(WebCore::RenderSnapshottedPlugIn::layout): Cache the rect representing the button
contents.
* rendering/RenderSnapshottedPlugIn.h:

Remove theming function for now.
* rendering/RenderTheme.h:
(RenderTheme):
* rendering/RenderThemeMacShared.h:
* rendering/RenderThemeMacShared.mm:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@135003 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/Resources/startButton.png [new file with mode: 0644]
Source/WebCore/Resources/startButton@2x.png [new file with mode: 0644]
Source/WebCore/Resources/startButtonPressed.png [new file with mode: 0644]
Source/WebCore/Resources/startButtonPressed@2x.png [new file with mode: 0644]
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/rendering/RenderSnapshottedPlugIn.cpp
Source/WebCore/rendering/RenderSnapshottedPlugIn.h
Source/WebCore/rendering/RenderTheme.h
Source/WebCore/rendering/RenderThemeMacShared.h
Source/WebCore/rendering/RenderThemeMacShared.mm

index e3117d0..dedf914 100644 (file)
@@ -1,3 +1,45 @@
+2012-11-16  Jon Lee  <jonlee@apple.com>
+
+        Change visual look of placeholder
+        https://bugs.webkit.org/show_bug.cgi?id=102149
+        <rdar://problem/12695566>
+
+        Reviewed by Darin Adler.
+
+        Move the button to the lower-right corner. Move the theming into
+        RenderSnapshottedPlugin for now. Eventually we will want to migrate to using the
+        shadow DOM instead, and the metrics of the button are needed for click passthrough.
+
+        * Resources/startButton.png: Added.
+        * Resources/startButton@2x.png: Added.
+        * Resources/startButtonPressed.png: Added.
+        * Resources/startButtonPressed@2x.png: Added.
+        * WebCore.xcodeproj/project.pbxproj: Add button images.
+
+        Maintain variables to track whether the mouse is over the button, and the rect
+        for the button. If the user clicks in the rect, we render a pressed button.
+        * rendering/RenderSnapshottedPlugIn.cpp:
+        (WebCore): Add named constant for bottom and right padding of the button.
+        (WebCore::RenderSnapshottedPlugIn::RenderSnapshottedPlugIn):
+        (WebCore::RenderSnapshottedPlugIn::paintReplaced):
+        (WebCore::startButtonImage): Returns button image.
+        (WebCore::startButtonPressedImage): Returns pressed button image.
+        (WebCore::RenderSnapshottedPlugIn::paintButton): Draw the button image in the
+        lower right hand corner, but only if we are active or hovered.
+        (WebCore::RenderSnapshottedPlugIn::repaintButton): Stubbed to call repaint().
+        (WebCore::RenderSnapshottedPlugIn::handleEvent): Repaint the button if we are
+        hovering over the plugin rect. With a mouse down event, calculate whether the
+        mouse position is within the button rect.
+        (WebCore::RenderSnapshottedPlugIn::layout): Cache the rect representing the button
+        contents.
+        * rendering/RenderSnapshottedPlugIn.h:
+
+        Remove theming function for now.
+        * rendering/RenderTheme.h:
+        (RenderTheme):
+        * rendering/RenderThemeMacShared.h:
+        * rendering/RenderThemeMacShared.mm:
+
 2012-11-16  Eric Seidel  <eric@webkit.org>
 
         Deploy ScriptWrappable to more always-wrapped objects
diff --git a/Source/WebCore/Resources/startButton.png b/Source/WebCore/Resources/startButton.png
new file mode 100644 (file)
index 0000000..2748c18
Binary files /dev/null and b/Source/WebCore/Resources/startButton.png differ
diff --git a/Source/WebCore/Resources/startButton@2x.png b/Source/WebCore/Resources/startButton@2x.png
new file mode 100644 (file)
index 0000000..0da4421
Binary files /dev/null and b/Source/WebCore/Resources/startButton@2x.png differ
diff --git a/Source/WebCore/Resources/startButtonPressed.png b/Source/WebCore/Resources/startButtonPressed.png
new file mode 100644 (file)
index 0000000..d582eaf
Binary files /dev/null and b/Source/WebCore/Resources/startButtonPressed.png differ
diff --git a/Source/WebCore/Resources/startButtonPressed@2x.png b/Source/WebCore/Resources/startButtonPressed@2x.png
new file mode 100644 (file)
index 0000000..316cd68
Binary files /dev/null and b/Source/WebCore/Resources/startButtonPressed@2x.png differ
index db61ebe..3439424 100644 (file)
                319E69B513299BBD004AC91A /* WebKitAnimationList.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 319E69AF13299BBD004AC91A /* WebKitAnimationList.cpp */; };
                319E69B613299BBD004AC91A /* WebKitAnimationList.h in Headers */ = {isa = PBXBuildFile; fileRef = 319E69B013299BBD004AC91A /* WebKitAnimationList.h */; };
                319FBD5F15D2F464009640A6 /* CachedImageClient.h in Headers */ = {isa = PBXBuildFile; fileRef = 319FBD5D15D2F444009640A6 /* CachedImageClient.h */; settings = {ATTRIBUTES = (Private, ); }; };
+               31A963A51655D426000D4645 /* startButton.png in Resources */ = {isa = PBXBuildFile; fileRef = 31A963A11655D426000D4645 /* startButton.png */; };
+               31A963A61655D426000D4645 /* startButton@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = 31A963A21655D426000D4645 /* startButton@2x.png */; };
+               31A963A71655D426000D4645 /* startButtonPressed.png in Resources */ = {isa = PBXBuildFile; fileRef = 31A963A31655D426000D4645 /* startButtonPressed.png */; };
+               31A963A81655D426000D4645 /* startButtonPressed@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = 31A963A41655D426000D4645 /* startButtonPressed@2x.png */; };
                31C0FF210E4CEB6E007D6FE5 /* WebKitAnimationEvent.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 31C0FF1B0E4CEB6E007D6FE5 /* WebKitAnimationEvent.cpp */; };
                31C0FF220E4CEB6E007D6FE5 /* WebKitAnimationEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 31C0FF1C0E4CEB6E007D6FE5 /* WebKitAnimationEvent.h */; };
                31C0FF240E4CEB6E007D6FE5 /* WebKitTransitionEvent.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 31C0FF1E0E4CEB6E007D6FE5 /* WebKitTransitionEvent.cpp */; };
                319E69B013299BBD004AC91A /* WebKitAnimationList.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = WebKitAnimationList.h; sourceTree = "<group>"; };
                319E69B113299BBD004AC91A /* WebKitAnimationList.idl */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = WebKitAnimationList.idl; sourceTree = "<group>"; };
                319FBD5D15D2F444009640A6 /* CachedImageClient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CachedImageClient.h; sourceTree = "<group>"; };
+               31A963A11655D426000D4645 /* startButton.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = startButton.png; sourceTree = "<group>"; };
+               31A963A21655D426000D4645 /* startButton@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "startButton@2x.png"; sourceTree = "<group>"; };
+               31A963A31655D426000D4645 /* startButtonPressed.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = startButtonPressed.png; sourceTree = "<group>"; };
+               31A963A41655D426000D4645 /* startButtonPressed@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "startButtonPressed@2x.png"; sourceTree = "<group>"; };
                31C0FF1B0E4CEB6E007D6FE5 /* WebKitAnimationEvent.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = WebKitAnimationEvent.cpp; sourceTree = "<group>"; };
                31C0FF1C0E4CEB6E007D6FE5 /* WebKitAnimationEvent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = WebKitAnimationEvent.h; sourceTree = "<group>"; };
                31C0FF1D0E4CEB6E007D6FE5 /* WebKitAnimationEvent.idl */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = WebKitAnimationEvent.idl; sourceTree = "<group>"; };
                                85136C940AED665900F90A3D /* southEastResizeCursor.png */,
                                85136C950AED665900F90A3D /* southResizeCursor.png */,
                                85136C960AED665900F90A3D /* southWestResizeCursor.png */,
+                               31A963A11655D426000D4645 /* startButton.png */,
+                               31A963A21655D426000D4645 /* startButton@2x.png */,
+                               31A963A31655D426000D4645 /* startButtonPressed.png */,
+                               31A963A41655D426000D4645 /* startButtonPressed@2x.png */,
                                93153BDB141959BB00FCF5BE /* textAreaResizeCorner.png */,
                                9370918C1416D86B00477333 /* textAreaResizeCorner@2x.png */,
                                46D4F2480AF97E810035385A /* verticalTextCursor.png */,
                                85136CA80AED665900F90A3D /* westResizeCursor.png in Resources */,
                                1AB1AE7A0C051FDE00139F4F /* zoomInCursor.png in Resources */,
                                1AB1AE7B0C051FDE00139F4F /* zoomOutCursor.png in Resources */,
+                               31A963A51655D426000D4645 /* startButton.png in Resources */,
+                               31A963A61655D426000D4645 /* startButton@2x.png in Resources */,
+                               31A963A71655D426000D4645 /* startButtonPressed.png in Resources */,
+                               31A963A81655D426000D4645 /* startButtonPressed@2x.png in Resources */,
                        );
                        runOnlyForDeploymentPostprocessing = 0;
                };
index 5a67eb6..272f04b 100644 (file)
@@ -39,10 +39,12 @@ namespace WebCore {
 
 static const int autoStartPlugInSizeThresholdWidth = 1;
 static const int autoStartPlugInSizeThresholdHeight = 1;
+static const int startButtonPadding = 10;
 
 RenderSnapshottedPlugIn::RenderSnapshottedPlugIn(HTMLPlugInImageElement* element)
     : RenderEmbeddedObject(element)
     , m_snapshotResource(RenderImageResource::create())
+    , m_isMouseInButtonRect(false)
 {
     m_snapshotResource->initialize(this);
 }
@@ -82,7 +84,7 @@ void RenderSnapshottedPlugIn::paintReplaced(PaintInfo& paintInfo, const LayoutPo
 {
     if (plugInImageElement()->displayState() < HTMLPlugInElement::Playing) {
         paintReplacedSnapshot(paintInfo, paintOffset);
-        theme()->paintPlugInSnapshotOverlay(this, paintInfo, paintOffset);
+        paintButton(paintInfo, paintOffset);
         return;
     }
 
@@ -120,6 +122,41 @@ void RenderSnapshottedPlugIn::paintReplacedSnapshot(PaintInfo& paintInfo, const
     context->drawImage(image.get(), style()->colorSpace(), alignedRect, CompositeSourceOver, shouldRespectImageOrientation(), useLowQualityScaling);
 }
 
+static Image* startButtonImage()
+{
+    static Image* buttonImage = Image::loadPlatformResource("startButton").leakRef();
+    return buttonImage;
+}
+
+static Image* startButtonPressedImage()
+{
+    static Image* buttonImage = Image::loadPlatformResource("startButtonPressed").leakRef();
+    return buttonImage;
+}
+
+void RenderSnapshottedPlugIn::paintButton(PaintInfo& paintInfo, const LayoutPoint& paintOffset)
+{
+    LayoutRect contentRect = contentBoxRect();
+    if (contentRect.isEmpty())
+        return;
+
+    Image* buttonImage = startButtonImage();
+    if (plugInImageElement()->active()) {
+        if (m_isMouseInButtonRect)
+            buttonImage = startButtonPressedImage();
+    } else if (!plugInImageElement()->hovered())
+        return;
+
+    LayoutPoint contentLocation = paintOffset + contentRect.maxXMaxYCorner() - buttonImage->size() - LayoutSize(startButtonPadding, startButtonPadding);
+    paintInfo.context->drawImage(buttonImage, ColorSpaceDeviceRGB, roundedIntPoint(contentLocation), buttonImage->rect());
+}
+
+void RenderSnapshottedPlugIn::repaintButton()
+{
+    // FIXME: This is unfortunate. We should just repaint the button.
+    repaint();
+}
+
 CursorDirective RenderSnapshottedPlugIn::getCursor(const LayoutPoint& point, Cursor& overrideCursor) const
 {
     if (plugInImageElement()->displayState() < HTMLPlugInElement::Playing) {
@@ -135,6 +172,7 @@ void RenderSnapshottedPlugIn::handleEvent(Event* event)
         return;
 
     MouseEvent* mouseEvent = static_cast<MouseEvent*>(event);
+
     if (event->type() == eventNames().clickEvent && mouseEvent->button() == LeftButton) {
         plugInImageElement()->setDisplayState(HTMLPlugInElement::Playing);
         if (widget()) {
@@ -143,6 +181,14 @@ void RenderSnapshottedPlugIn::handleEvent(Event* event)
             repaint();
         }
         event->setDefaultHandled();
+    } else if (event->type() == eventNames().mouseoverEvent || event->type() == eventNames().mouseoutEvent)
+        repaintButton();
+    else if (event->type() == eventNames().mousedownEvent) {
+        bool isMouseInButtonRect = m_buttonRect.contains(IntPoint(mouseEvent->offsetX(), mouseEvent->offsetY()));
+        if (isMouseInButtonRect != m_isMouseInButtonRect) {
+            m_isMouseInButtonRect = isMouseInButtonRect;
+            repaintButton();
+        }
     }
 }
 
@@ -156,6 +202,9 @@ void RenderSnapshottedPlugIn::layout()
         if (!width || !height || (width <= autoStartPlugInSizeThresholdWidth && height <= autoStartPlugInSizeThresholdHeight))
             plugInImageElement()->setDisplayState(HTMLPlugInElement::Playing);
     }
+
+    LayoutSize buttonSize = startButtonImage()->size();
+    m_buttonRect = LayoutRect(contentBoxRect().maxXMaxYCorner() - LayoutSize(startButtonPadding, startButtonPadding) - buttonSize, buttonSize);
 }
 
 } // namespace WebCore
index 1a42c0d..2a1f896 100644 (file)
@@ -52,11 +52,16 @@ private:
     virtual bool isSnapshottedPlugIn() const OVERRIDE { return true; }
     virtual void paint(PaintInfo&, const LayoutPoint&) OVERRIDE;
     virtual void paintReplaced(PaintInfo&, const LayoutPoint&) OVERRIDE;
+
     void paintReplacedSnapshot(PaintInfo&, const LayoutPoint&);
+    void paintButton(PaintInfo&, const LayoutPoint&);
+    void repaintButton();
 
     virtual void layout() OVERRIDE;
 
     OwnPtr<RenderImageResource> m_snapshotResource;
+    LayoutRect m_buttonRect;
+    bool m_isMouseInButtonRect;
 };
 
 inline RenderSnapshottedPlugIn* toRenderSnapshottedPlugIn(RenderObject* object)
index 677c563..bbb86e1 100644 (file)
@@ -243,8 +243,6 @@ public:
     virtual String fileListDefaultLabel(bool multipleFilesAllowed) const;
     virtual String fileListNameForWidth(const FileList*, const Font&, int width, bool multipleFilesAllowed) const;
 
-    virtual void paintPlugInSnapshotOverlay(RenderSnapshottedPlugIn*, const PaintInfo&, const LayoutPoint&) const { }
-
     virtual bool shouldOpenPickerWithF4Key() const;
 
 protected:
index 13391df..5283cb8 100644 (file)
@@ -98,8 +98,6 @@ public:
     // A view associated to the contained document. Subclasses may not have such a view and return a fake.
     virtual NSView* documentViewFor(RenderObject*) const = 0;
 
-    virtual void paintPlugInSnapshotOverlay(RenderSnapshottedPlugIn*, const PaintInfo&, const LayoutPoint&) const OVERRIDE;
-
 protected:
     RenderThemeMacShared();
     virtual ~RenderThemeMacShared();
index 8e902fc..e6074cc 100644 (file)
@@ -1832,43 +1832,4 @@ String RenderThemeMacShared::fileListNameForWidth(const FileList* fileList, cons
     return StringTruncator::centerTruncate(strToTruncate, width, font, StringTruncator::EnableRoundingHacks);
 }
 
-void RenderThemeMacShared::paintPlugInSnapshotOverlay(RenderSnapshottedPlugIn* renderer, const PaintInfo& paintInfo, const LayoutPoint& paintOffset) const
-{
-    LayoutUnit cWidth = renderer->contentWidth();
-    LayoutUnit cHeight = renderer->contentHeight();
-    if (!cWidth || !cHeight)
-        return;
-
-    GraphicsContext* context = paintInfo.context;
-    GraphicsContextStateSaver saver(*context);
-
-    LayoutSize borderAndPadding(renderer->borderLeft() + renderer->paddingLeft(), renderer->borderTop() + renderer->paddingTop());
-
-    LayoutSize contentSize(cWidth, cHeight);
-    LayoutPoint contentLocation = paintOffset;
-    contentLocation.move(borderAndPadding);
-
-    RefPtr<Gradient> g = Gradient::create(contentLocation, FloatPoint(contentLocation.x(), contentLocation.y() + cHeight));
-    g->addColorStop(0,  Color(.5f, .5, .5, .7));
-    g->addColorStop(.2, Color(.54f, .54, .54, .3));
-    g->addColorStop(.6, Color(.62f, .62, .62, .3));
-    g->addColorStop(1,  Color(.7f, .7, .7, .95));
-    context->setFillGradient(g.release());
-    context->fillRect(pixelSnappedIntRect(LayoutRect(contentLocation, contentSize)));
-
-    static const float diameter = 50, triangleRadius = 12;
-    LayoutPoint center = contentLocation;
-    center.move(cWidth / 2, cHeight / 2);
-    context->setFillColor(Color(.4f, .4, .4, .7), ColorSpaceSRGB);
-    context->fillEllipse(FloatRect(center.x() - diameter / 2, center.y() - diameter / 2, diameter, diameter));
-
-    Path p;
-    p.moveTo(FloatPoint(center.x() - triangleRadius * 3 / 4, center.y() - triangleRadius));
-    p.addLineTo(FloatPoint(center.x() + triangleRadius * 5 / 4, center.y()));
-    p.addLineTo(FloatPoint(center.x() - triangleRadius * 3 / 4, center.y() + triangleRadius));
-    p.closeSubpath();
-    context->setFillColor(Color(1.f, 1.f, 1.f, .9f), ColorSpaceSRGB);
-    context->fillPath(p);
-}
-
 } // namespace WebCore