Move <marquee> implementation to HTMLMarqueeElement.cpp

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

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
  * Copyright (C) 2003, 2007, 2010 Apple Inc. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
  * License as published by the Free Software Foundation; either
  * version 2 of the License, or (at your option) any later version.
  *
  * This library is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  * Library General Public License for more details.
  *
  * You should have received a copy of the GNU Library General Public License
  * along with this library; see the file COPYING.LIB.  If not, write to
  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
  * Boston, MA 02110-1301, USA.
  *
  */
 
 #include "core/html/HTMLMarqueeElement.h"
 
-#include "bindings/core/v8/PrivateScriptRunner.h"
+#include "bindings/core/v8/ExceptionStatePlaceholder.h"
 #include "bindings/core/v8/V8HTMLMarqueeElement.h"
+#include "core/CSSPropertyNames.h"
 #include "core/HTMLNames.h"
+#include "core/animation/DocumentTimeline.h"
+#include "core/animation/KeyframeEffect.h"
+#include "core/animation/KeyframeEffectModel.h"
+#include "core/animation/KeyframeEffectOptions.h"
+#include "core/animation/StringKeyframe.h"
+#include "core/animation/TimingInput.h"
+#include "core/css/CSSStyleDeclaration.h"
 #include "core/dom/Document.h"
+#include "core/dom/shadow/ShadowRoot.h"
+#include "core/frame/LocalDOMWindow.h"
 #include "core/frame/UseCounter.h"
-#include "platform/ScriptForbiddenScope.h"
+#include "core/html/HTMLContentElement.h"
+#include "core/html/HTMLDimension.h"
+#include "core/html/HTMLDivElement.h"
+#include "core/html/HTMLStyleElement.h"
+#include <cstdlib>
 
 namespace blink {
 
+namespace {
+
+String convertHTMLLengthToCSSLength(const String& htmlLength) {
+  HTMLDimension dimension;
+  parseDimensionValue(htmlLength, dimension);
+  if (dimension.isRelative())
+    return String();
+  CSSPrimitiveValue* cssValue = CSSPrimitiveValue::create(
+      dimension.value(), dimension.isPercentage()
+                             ? CSSPrimitiveValue::UnitType::Percentage
+                             : CSSPrimitiveValue::UnitType::Pixels);
+  return cssValue->customCSSText();
+}
+
+}  // namespace
+
 inline HTMLMarqueeElement::HTMLMarqueeElement(Document& document)
     : HTMLElement(HTMLNames::marqueeTag, document) {
-  if (document.contextDocument()) {
-    ScriptForbiddenScope::AllowUserAgentScript script;
-    v8::Local<v8::Value> classObject =
-        PrivateScriptRunner::installClassIfNeeded(&document,
-                                                  "HTMLMarqueeElement");
-    RELEASE_ASSERT(!classObject.IsEmpty());
-  }
   UseCounter::count(document, UseCounter::HTMLMarqueeElement);
+  ShadowRoot* shadow =
+      createShadowRootInternal(ShadowRootType::V0, ASSERT_NO_EXCEPTION);
+  Element* style = HTMLStyleElement::create(document, false);
+  style->setTextContent(
+      ":host { display: inline-block; width: -webkit-fill-available; overflow: "
+      "hidden; text-align: initial; white-space: nowrap; }"
+      ":host([direction=\"up\"]), :host([direction=\"down\"]) { overflow: "
+      "initial; overflow-y: hidden; white-space: initial; }"
+      ":host > div { will-change: transform; }");
+  shadow->appendChild(style);
+
+  Element* mover = HTMLDivElement::create(document);
+  shadow->appendChild(mover);
+
+  mover->appendChild(HTMLContentElement::create(document));
+  m_mover = mover;
 }
 
 HTMLMarqueeElement* HTMLMarqueeElement::create(Document& document) {
-  HTMLMarqueeElement* marqueeElement = new HTMLMarqueeElement(document);
-  V8HTMLMarqueeElement::PrivateScript::createdCallbackMethod(document.frame(),
-                                                             marqueeElement);
-  return marqueeElement;
+  return new HTMLMarqueeElement(document);
 }
 
 void HTMLMarqueeElement::attributeChanged(const QualifiedName& name,
                                           const AtomicString& oldValue,
                                           const AtomicString& newValue,
                                           AttributeModificationReason reason) {
   HTMLElement::attributeChanged(name, oldValue, newValue, reason);
-  V8HTMLMarqueeElement::PrivateScript::attributeChangedCallbackMethod(
-      document().frame(), this, name.toString(), oldValue, newValue);
+  attributeChangedCallback(name, newValue);
 }
 
 Node::InsertionNotificationRequest HTMLMarqueeElement::insertedInto(
     ContainerNode* insertionPoint) {
   HTMLElement::insertedInto(insertionPoint);
+
   if (isConnected()) {
-    V8HTMLMarqueeElement::PrivateScript::attachedCallbackMethod(
-        document().frame(), this);
+    static const QualifiedName* presentationalAttributes[] = {
+        &HTMLNames::bgcolorAttr, &HTMLNames::heightAttr, &HTMLNames::hspaceAttr,
+        &HTMLNames::vspaceAttr, &HTMLNames::widthAttr};
+    for (const auto* attr : presentationalAttributes) {
+      initializeAttribute(*attr);
+    }
+
+    start();
   }
   return InsertionDone;
 }
 
 void HTMLMarqueeElement::removedFrom(ContainerNode* insertionPoint) {
   HTMLElement::removedFrom(insertionPoint);
   if (insertionPoint->isConnected()) {
-    V8HTMLMarqueeElement::PrivateScript::detachedCallbackMethod(
-        insertionPoint->document().frame(), this);
+    stop();
   }
 }
 
 bool HTMLMarqueeElement::isHorizontal() const {
-  AtomicString direction = getAttribute(HTMLNames::directionAttr);
-  return direction != "down" && direction != "up";
+  Direction direction = this->direction();
+  return direction != Up && direction != Down;
+}
+
+int HTMLMarqueeElement::scrollAmount() {
+  bool ok;
+  int scrollAmount = getAttribute(HTMLNames::scrollamountAttr).toInt(&ok);
+  if (!ok || scrollAmount < 0)
+    return kDefaultScrollAmount;
+  return scrollAmount;
+}
+
+void HTMLMarqueeElement::setScrollAmount(int value,
+                                         ExceptionState& exceptionState) {
+  if (value < 0) {
+    exceptionState.throwDOMException(
+        IndexSizeError,
+        "The provided value (" + String::number(value) + ") is negative.");
+    return;
+  }
+  setIntegralAttribute(HTMLNames::scrollamountAttr, value);
+}
+
+int HTMLMarqueeElement::scrollDelay() {
+  bool ok;
+  int scrollDelay = getAttribute(HTMLNames::scrolldelayAttr).toInt(&ok);
+  if (!ok || scrollDelay < 0)
+    return kDefaultScrollDelayMS;
+  return scrollDelay;
+}
+
+void HTMLMarqueeElement::setScrollDelay(int value,
+                                        ExceptionState& exceptionState) {
+  if (value < 0) {
+    exceptionState.throwDOMException(
+        IndexSizeError,
+        "The provided value (" + String::number(value) + ") is negative.");
+    return;
+  }
+  setIntegralAttribute(HTMLNames::scrolldelayAttr, value);
+}
+
+int HTMLMarqueeElement::loop() {
+  bool ok;
+  int loop = getAttribute(HTMLNames::loopAttr).toInt(&ok);
+  if (!ok || loop <= 0)
+    return kDefaultLoopLimit;
+  return loop;
+}
+
+void HTMLMarqueeElement::setLoop(int value, ExceptionState& exceptionState) {
+  if (value <= 0 && value != -1) {
+    exceptionState.throwDOMException(
+        IndexSizeError, "The provided value (" + String::number(value) +
+                            ") is neither positive nor -1.");
+    return;
+  }
+  setIntegralAttribute(HTMLNames::loopAttr, value);
+}
+
+void HTMLMarqueeElement::start() {
+  if (m_continueCallbackRequestId)
+    return;
+
+  RequestAnimationFrameCallback* callback =
+      new RequestAnimationFrameCallback(this);
+  m_continueCallbackRequestId = document().requestAnimationFrame(callback);
+}
+
+void HTMLMarqueeElement::stop() {
+  if (m_continueCallbackRequestId) {
+    document().cancelAnimationFrame(m_continueCallbackRequestId);
+    m_continueCallbackRequestId = 0;
+    return;
+  }
+
+  if (m_player)
+    m_player->pause();
+}
+
+void HTMLMarqueeElement::initializeAttribute(const QualifiedName& attr) {
+  const AtomicString& value = getAttribute(attr);
+  if (value.isNull())
+    return;
+  attributeChangedCallback(attr, value);
+}
+
+void HTMLMarqueeElement::attributeChangedCallback(const QualifiedName& attr,
+                                                  const String& newValue) {
+  if (attr == HTMLNames::bgcolorAttr) {
+    style()->setProperty("background-color", newValue, String(),
+                         ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::heightAttr) {
+    style()->setProperty("height", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::hspaceAttr) {
+    style()->setProperty("margin-left", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+    style()->setProperty("margin-right", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::vspaceAttr) {
+    style()->setProperty("margin-top", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+    style()->setProperty("margin-bottom",
+                         convertHTMLLengthToCSSLength(newValue), String(),
+                         ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::widthAttr) {
+    style()->setProperty("width", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  }
+}
+
+void HTMLMarqueeElement::RequestAnimationFrameCallback::handleEvent(double) {
+  m_marquee->m_continueCallbackRequestId = 0;
+  m_marquee->continueAnimation();
+}
+
+void HTMLMarqueeElement::AnimationFinished::handleEvent(
+    ExecutionContext* context,
+    Event* event) {
+  ++m_marquee->m_loopCount;
+  m_marquee->start();
+}
+
+StringKeyframeEffectModel* HTMLMarqueeElement::createEffectModel(
+    AnimationParameters& parameters) {
+  StyleSheetContents* styleSheetContents =
+      m_mover->document().elementSheet().contents();
+
+  RefPtr<StringKeyframe> keyframe1 = StringKeyframe::create();
+  keyframe1->setCSSPropertyValue(CSSPropertyTransform,
+                                 parameters.transformBegin, styleSheetContents);
+
+  RefPtr<StringKeyframe> keyframe2 = StringKeyframe::create();
+  keyframe2->setCSSPropertyValue(CSSPropertyTransform, parameters.transformEnd,
+                                 styleSheetContents);
+
+  return StringKeyframeEffectModel::create(
+      {std::move(keyframe1), std::move(keyframe2)},
+      LinearTimingFunction::shared());
+}
+
+void HTMLMarqueeElement::continueAnimation() {
+  if (!shouldContinue())
+    return;
+
+  if (m_player && m_player->playState() == "paused") {
+    m_player->play();
+    return;
+  }
+
+  AnimationParameters parameters = getAnimationParameters();
+  int scrollDelay = this->scrollDelay();
+  int scrollAmount = this->scrollAmount();
+
+  if (scrollDelay < kMinimumScrollDelayMS && !trueSpeed())
+    scrollDelay = kDefaultScrollDelayMS;
+  double duration = 0;
+  if (scrollAmount)
+    duration = parameters.distance * scrollDelay / scrollAmount;
+  if (!duration)
+    return;
+
+  StringKeyframeEffectModel* effectModel = createEffectModel(parameters);
+  Timing timing;
+  timing.fillMode = Timing::FillMode::FORWARDS;
+  TimingInput::setIterationDuration(
+      timing, UnrestrictedDoubleOrString::fromUnrestrictedDouble(duration),
+      ASSERT_NO_EXCEPTION);
+
+  KeyframeEffect* keyframeEffect =
+      KeyframeEffect::create(m_mover, effectModel, timing);
+  Animation* player = m_mover->document().timeline().play(keyframeEffect);
+  player->setId(emptyString());
+  player->setOnfinish(new AnimationFinished(this));
+
+  m_player = player;
+}
+
+bool HTMLMarqueeElement::shouldContinue() {
+  int lp = loop();
+
+  // By default, slide loops only once.
+  if (lp <= 0 && behavior() == Slide)
+    lp = 1;
+
+  if (lp <= 0)
+    return true;
+  return m_loopCount < lp;
+}
+
+HTMLMarqueeElement::Behavior HTMLMarqueeElement::behavior() const {
+  const AtomicString& bhvr = getAttribute(HTMLNames::behaviorAttr);

[jbroman, 2016/12/03 23:47:31]

"bhvr" and "lp" (above) are a bit too terse for Blink style. "behaviorString"
and "totalLoopCount" or something like that?

[adithyas, 2016/12/05 16:44:27]

Fixed.

+  if (bhvr == "alternate")
+    return Alternate;
+  if (bhvr == "slide")
+    return Slide;
+  return Scroll;
+}
+
+HTMLMarqueeElement::Direction HTMLMarqueeElement::direction() const {
+  const AtomicString& dir = getAttribute(HTMLNames::directionAttr);

[haraken, 2016/12/05 02:10:53]

direction

[adithyas, 2016/12/05 16:44:27]

Fixed.

+  if (dir == "down")
+    return Down;
+  if (dir == "up")
+    return Up;
+  if (dir == "right")
+    return Right;
+  return Left;
+}
+
+bool HTMLMarqueeElement::trueSpeed() const {
+  return hasAttribute(HTMLNames::truespeedAttr);
+}
+
+HTMLMarqueeElement::Metrics HTMLMarqueeElement::getMetrics() {
+  Metrics metrics;
+  CSSStyleDeclaration* marqueeStyle =
+      document().domWindow()->getComputedStyle(this, String());
+  // For marquees that are declared inline, getComputedStyle returns "auto" for
+  // width and height. Setting all the metrics to zero disables animation for
+  // inline marquees.
+  if (marqueeStyle->getPropertyValue("width") == "auto" &&
+      marqueeStyle->getPropertyValue("height") == "auto") {
+    metrics.contentHeight = 0;
+    metrics.contentWidth = 0;
+    metrics.marqueeWidth = 0;
+    metrics.marqueeHeight = 0;
+    return metrics;
+  }
+
+  if (isHorizontal()) {
+    m_mover->style()->setProperty("width", "-webkit-max-content", "important",
+                                  ASSERT_NO_EXCEPTION);
+  } else {
+    m_mover->style()->setProperty("height", "-webkit-max-content", "important",
+                                  ASSERT_NO_EXCEPTION);
+  }
+  CSSStyleDeclaration* moverStyle =
+      document().domWindow()->getComputedStyle(m_mover, String());
+
+  metrics.contentWidth = moverStyle->getPropertyValue("width").toDouble();
+  metrics.contentHeight = moverStyle->getPropertyValue("height").toDouble();
+  metrics.marqueeWidth = marqueeStyle->getPropertyValue("width").toDouble();
+  metrics.marqueeHeight = marqueeStyle->getPropertyValue("height").toDouble();
+
+  if (isHorizontal()) {
+    m_mover->style()->setProperty("width", "", "important",
+                                  ASSERT_NO_EXCEPTION);
+  } else {
+    m_mover->style()->setProperty("height", "", "important",
+                                  ASSERT_NO_EXCEPTION);
+  }
+
+  return metrics;
+}
+
+HTMLMarqueeElement::AnimationParameters
+HTMLMarqueeElement::getAnimationParameters() {
+  AnimationParameters parameters;
+  Metrics metrics = getMetrics();
+
+  double totalWidth = metrics.marqueeWidth + metrics.contentWidth;
+  double totalHeight = metrics.marqueeHeight + metrics.contentHeight;
+
+  double innerWidth = metrics.marqueeWidth - metrics.contentWidth;
+  double innerHeight = metrics.marqueeHeight - metrics.contentHeight;
+
+  switch (behavior()) {
+    case Alternate:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(false, innerWidth >= 0 ? 0 : innerWidth);
+          parameters.transformEnd =
+              createTransform(false, innerWidth >= 0 ? innerWidth : 0);
+          parameters.distance = std::abs(innerWidth);
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, innerHeight >= 0 ? innerHeight : 0);
+          parameters.transformEnd =
+              createTransform(false, innerHeight >= 0 ? 0 : innerHeight);
+          parameters.distance = std::abs(innerHeight);
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(false, innerHeight >= 0 ? 0 : innerHeight);
+          parameters.transformEnd =
+              createTransform(false, innerHeight >= 0 ? innerHeight : 0);
+          parameters.distance = std::abs(innerHeight);
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, innerWidth >= 0 ? innerWidth : 0);
+          parameters.transformEnd =
+              createTransform(false, innerWidth >= 0 ? 0 : innerWidth);
+          parameters.distance = std::abs(innerWidth);
+      }
+
+      if (m_loopCount % 2) {
+        AtomicString transform = parameters.transformBegin;

[jbroman, 2016/12/03 23:47:31]

nit: more concisely (and IMHO, clearly):

std::swap(parameters.transformBegin, parameters.transformEnd);

[adithyas, 2016/12/05 16:44:27]

Fixed, thanks.

+        parameters.transformBegin = parameters.transformEnd;
+        parameters.transformEnd = transform;
+      }
+
+      break;
+    case Slide:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentWidth);
+          parameters.transformEnd = createTransform(false, innerWidth);
+          parameters.distance = metrics.marqueeWidth;
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.transformEnd = "translateY(0)";
+          parameters.distance = metrics.marqueeHeight;
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentHeight);
+          parameters.transformEnd = createTransform(false, innerHeight);
+          parameters.distance = metrics.marqueeHeight;
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.transformEnd = "translateX(0)";
+          parameters.distance = metrics.marqueeWidth;
+      }
+      break;
+    case Scroll:
+    default:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentWidth);
+          parameters.transformEnd =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.distance = totalWidth;
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.transformEnd =
+              createTransform(true, metrics.contentHeight);
+          parameters.distance = totalHeight;
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentHeight);
+          parameters.transformEnd =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.distance = totalHeight;
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.transformEnd = createTransform(true, metrics.contentWidth);
+          parameters.distance = totalWidth;
+      }
+      break;
+  }
+
+  return parameters;
+}
+
+AtomicString HTMLMarqueeElement::createTransform(bool isNegative,

[jbroman, 2016/12/03 23:47:31]

Why the |isNegative| parameter, instead of simple passing the negation of
|value|? This would also mean you wouldn't need the if statement here.

[adithyas, 2016/12/05 16:44:27]

I have no idea why I did something so convoluted, fixed :)

+                                                 double value) const {
+  char axis = isHorizontal() ? 'X' : 'Y';
+  if (isNegative)
+    return AtomicString(String::format("translate%c(-%fpx)", axis, value));

[jbroman, 2016/12/03 23:47:31]

If you change the other thing to String, you can remove this conversion to
AtomicString (and change the function signature).

[adithyas, 2016/12/05 16:44:27]

Fixed.

+  return AtomicString(String::format("translate%c(%fpx)", axis, value));
+}
+
+DEFINE_TRACE(HTMLMarqueeElement) {
+  visitor->trace(m_mover);
+  visitor->trace(m_player);
+  HTMLElement::trace(visitor);
 }
 
 }  // namespace blink