Add download button to MediaDocument on Android.

third_party/WebKit/Source/core/html/MediaDocument.cpp

Index: third_party/WebKit/Source/core/html/MediaDocument.cpp
diff --git a/third_party/WebKit/Source/core/html/MediaDocument.cpp b/third_party/WebKit/Source/core/html/MediaDocument.cpp
index 525d869dbb2ff380d5110f98d9e9b3d3e17ac593..8d030c2b2133c7bbbef431ffdea1381aeb44a719 100644
--- a/third_party/WebKit/Source/core/html/MediaDocument.cpp
+++ b/third_party/WebKit/Source/core/html/MediaDocument.cpp
@@ -31,7 +31,9 @@
 #include "core/dom/RawDataDocumentParser.h"
 #include "core/events/KeyboardEvent.h"
 #include "core/frame/LocalFrame.h"
+#include "core/html/HTMLAnchorElement.h"
 #include "core/html/HTMLBodyElement.h"
+#include "core/html/HTMLDivElement.h"
 #include "core/html/HTMLHeadElement.h"
 #include "core/html/HTMLHtmlElement.h"
 #include "core/html/HTMLMetaElement.h"
@@ -41,6 +43,7 @@
 #include "core/loader/FrameLoader.h"
 #include "core/loader/FrameLoaderClient.h"
 #include "platform/KeyboardCodes.h"
+#include "platform/text/PlatformLocale.h"
 
 namespace blink {
 
@@ -98,8 +101,57 @@ void MediaDocumentParser::createDocumentStructure()
     media->appendChild(source.release());
 
     RefPtrWillBeRawPtr<HTMLBodyElement> body = HTMLBodyElement::create(*document());
-    body->appendChild(media.release());
 
+    // Style sheets for media controls are lazily loaded until a media element is encountered.
+    // As a result, elements encountered before the media element will not get the right
+    // style at first if we put the styles in mediacontrols.css. To solve this issue, set the
+    // styles inline so that they will be applied when the page loads.
+    RefPtrWillBeRawPtr<HTMLDivElement> div = HTMLDivElement::create(*document());
+    div->setAttribute(
+        styleAttr,
+        "max-height: 100%;"
+        "max-width: 100%;"
+        "position: absolute;"
+        "top: 50%;"
+        "left: 50%;"
+        "margin-right: -50%;"
+        "transform: translate(-50%, -50%);");

[esprehn, 2016/03/18 05:19:39]

Can you explain what you're doing here? magin-right: -50% and this translate
doesn't seem like the right way to get the effect you want.

[qinmin, 2016/03/18 06:52:40]

The technique for centering the element with the margin-right:-50% and (-50%,
-50%) translate can be found here:
https://www.w3.org/Style/Examples/007/center.en.html

Without the transform, the element's left-top corner is at the center of the
page.
So the translate will move the element back to the center of the page (-50%,
-50% will drag the element 1/2 way towards the up-left corder, thus making it
centered)

Since the element's left side is at 50% of the viewport width, so its width is
shrink to 50% of the original size. And the "margin-right: -50%" style will give
back the other 50% width to the element, so that it is at its full length.

[qinmin, 2016/03/18 19:42:03]

Added a comment here to include the w3c example page.

+
+    if (RuntimeEnabledFeatures::mediaDocumentDownloadButtonEnabled()) {
+        // Padding is used to compensate for the height of the download button so that the media element can still be centered.
+        RefPtrWillBeRawPtr<HTMLDivElement> padding = HTMLDivElement::create(*document());
+        padding->setAttribute(heightAttr, "68px;");
+        div->appendChild(padding.release());
+    }
+
+    div->appendChild(media.release());
+
+    if (RuntimeEnabledFeatures::mediaDocumentDownloadButtonEnabled()) {
+        RefPtrWillBeRawPtr<HTMLAnchorElement> anchor = HTMLAnchorElement::create(*document());
+        anchor->setAttribute(downloadAttr, "");
+        anchor->setURL(document()->url());
+        anchor->setTextContent(document()->getCachedLocale(document()->contentLanguage()).queryString(WebLocalizedString::DownloadButtonLabel));
+        // Using CSS style according to Android material design.
+        anchor->setAttribute(
+            styleAttr,
+            "display: block;"
+            "width: 120px;"
+            "height: 36px;"
+            "background: #4285F4;"
+            "font-family: Roboto;"
+            "font-size: 14px;"
+            "border-radius: 5px;"
+            "color: white;"
+            "font-weight: bold;"
+            "text-decoration: none;"
+            "text-transform: uppercase;"
+            "text-align: center;"
+            "line-height: 36px;"
+            "margin: 32px auto 0 auto;");

[esprehn, 2016/03/18 05:19:39]

can we insert a <style> element and give these two things ids instead?

[qinmin, 2016/03/18 19:42:03]

Done.

+        div->appendChild(anchor.release());
+    }
+
+    body->appendChild(div.release());
     rootElement->appendChild(head.release());
     rootElement->appendChild(body.release());