Implement HTMLMarqueeElement's animation in private scripts

Source/core/html/HTMLMarqueeElement.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
 
     var kDefaultScrollAmount = 6;
     var kDefaultScrollDelayMS = 85;
@@ skipping 63 matching lines @@
             },
             set: function(value) {
                 if (value)
                     this.setAttribute(attributeName, '');
                 else
                     this.removeAttribute(attributeName);
             },
         });
     }
 
-    function defineInlineEventHandler(prototype, eventName) {
-        var propertyName = 'on' + eventName;
-        // FIXME: We should use symbols here instead.
-        var functionPropertyName = propertyName + 'Function_';
-        var eventHandlerPropertyName = propertyName + 'EventHandler_';
-        Object.defineProperty(prototype, propertyName, {
-            get: function() {
-                var func = this[functionPropertyName];
-                return func || null;
-            },
-            set: function(value) {
-                var oldEventHandler = this[eventHandlerPropertyName];
-                if (oldEventHandler)
-                    this.removeEventListener(eventName, oldEventHandler);
-                // Notice that we wrap |value| in an anonymous function so that the
-                // author can't call removeEventListener themselves to unregister the
-                // inline event handler.
-                var newEventHandler = value ? function() { value.apply(this, arguments) } : null;
-                if (newEventHandler)
-                    this.addEventListener(eventName, newEventHandler);
-                this[functionPropertyName] = value;
-                this[eventHandlerPropertyName] = newEventHandler;
-            },
-        });
-    }
-
     reflectAttribute(HTMLMarqueeElementPrototype, 'behavior', 'behavior');
     reflectAttribute(HTMLMarqueeElementPrototype, 'bgcolor', 'bgColor');
     reflectAttribute(HTMLMarqueeElementPrototype, 'direction', 'direction');
     reflectAttribute(HTMLMarqueeElementPrototype, 'height', 'height');
     reflectAttribute(HTMLMarqueeElementPrototype, 'hspace', 'hspace');
     reflectAttribute(HTMLMarqueeElementPrototype, 'vspace', 'vspace');
     reflectAttribute(HTMLMarqueeElementPrototype, 'width', 'width');
     reflectBooleanAttribute(HTMLMarqueeElementPrototype, 'truespeed', 'trueSpeed');
 
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'start');
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'finish');
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'bounce');
-
     HTMLMarqueeElementPrototype.createdCallback = function() {
         var shadow = this.createShadowRoot();
         var style = document.createElement('style');
-    style.textContent = ':host { display: inline-block; width: -webkit-fill-available; overflow: hidden; text-align: initial; }' +
+        style.textContent = ':host { display: inline-block; width: -webkit-fill-available; overflow: hidden; text-align: initial; }' +
             ':host([direction="up"]), :host([direction="down"]) { height: 200px; }';
         shadow.appendChild(style);
 
         var mover = document.createElement('div');
         shadow.appendChild(mover);
 
         mover.appendChild(document.createElement('content'));
 
         this.loopCount_ = 0;
         this.mover_ = mover;
         this.player_ = null;
         this.continueCallback_ = null;
-
-        for (var i = 0; i < kPresentationalAttributes.length; ++i)
-            this.initializeAttribute_(kPresentationalAttributes[i]);
     };
 
     HTMLMarqueeElementPrototype.attachedCallback = function() {
+        for (var i = 0; i < kPresentationalAttributes.length; ++i)
+            this.initializeAttribute_(kPresentationalAttributes[i]);
+
         this.start();
     };
 
     HTMLMarqueeElementPrototype.detachedCallback = function() {
         this.stop();
     };
 
     HTMLMarqueeElementPrototype.attributeChangedCallback = function(name, oldValue, newValue) {
         switch (name) {
         case 'bgcolor':
@@ skipping 10 matching lines @@
         case 'vspace':
             var margin = convertHTMLLengthToCSSLength(newValue);
             this.style.marginTop = margin;
             this.style.marginBottom = margin;
             break;
         case 'width':
             this.style.width = convertHTMLLengthToCSSLength(newValue);
             break;
         case 'behavior':
         case 'direction':
-            this.stop();
-            this.loopCount_ = 0;
-            this.start();
+        case 'loop':
+        case 'scrollAmount':
+        case 'scrollDelay':
+        case 'trueSpeed':
+            // FIXME: Not implemented.

[haraken, 2014/09/26 07:53:06]

This is the only regression this CL may cause. This CL doesn't support a case
where the animation attributes are changed dynamically.

What we need to do here is to pause the animation, reconfigure the animation
attributes, and then restart the animation. However, there is no easy way to do
that. For example, when scrollAmount is changed, we need to update
AnimationNode.duration of the ongoing animation. However, AnimationNode.duration
is a readonly attribute.

I'm not sure if not supporting the attribute update causes any real issue (I
hope not). I think we can land this and see how it goes.

             break;
         }
     };
 
     HTMLMarqueeElementPrototype.initializeAttribute_ = function(name) {
         var value = this.getAttribute(name);
         if (value === null)
             return;
         this.attributeChangedCallback(name, null, value);
     };
@@ skipping 36 matching lines @@
                 return kDefaultLoopLimit;
             return loop;
         },
         set: function(value) {
             if (value <= 0 && value != -1)
                 throwException(PrivateScriptDOMException.IndexSizeError, "The provided value (" + value + ") is neither positive nor -1.");
             this.setAttribute('loop', value);
         },
     });
 
-    HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
+     HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
         this.mover_.style.width = '-webkit-max-content';
 
         var moverStyle = getComputedStyle(this.mover_);
         var marqueeStyle = getComputedStyle(this);
 
         var metrics = {};
         metrics.contentWidth = parseInt(moverStyle.width);
         metrics.contentHeight = parseInt(moverStyle.height);
         metrics.marqueeWidth = parseInt(marqueeStyle.width);
         metrics.marqueeHeight = parseInt(marqueeStyle.height);
@@ skipping 13 matching lines @@
 
         var parameters = {};
 
         switch (this.behavior) {
         case kBehaviorScroll:
         default:
             switch (this.direction) {
             case kDirectionLeft:
             default:
                 parameters.transformBegin = 'translateX(' + metrics.marqueeWidth + 'px)';
-                parameters.transformEnd = 'translateX(-100%)';
+                parameters.transformEnd = 'translateX(-' + metrics.contentWidth + 'px)';
                 parameters.distance = totalWidth;
                 break;
             case kDirectionRight:
                 parameters.transformBegin = 'translateX(-' + metrics.contentWidth + 'px)';
                 parameters.transformEnd = 'translateX(' + metrics.marqueeWidth + 'px)';
                 parameters.distance = totalWidth;
                 break;
             case kDirectionUp:
                 parameters.transformBegin = 'translateY(' + metrics.marqueeHeight + 'px)';
                 parameters.transformEnd = 'translateY(-' + metrics.contentHeight + 'px)';
@@ skipping 61 matching lines @@
                 parameters.transformEnd = 'translateY(' + innerHeight + 'px)';
                 parameters.distance = metrics.marqueeHeight;
                 break;
             }
             break;
         }
 
         return parameters
     };
 
+    function animationFinished_(event) {
+        var player = event.target;
+        var marquee = player.marquee_;
+        marquee.loopCount_++;
+        marquee.start();
+    };
+
     HTMLMarqueeElementPrototype.shouldContinue_ = function() {
         var loop = this.loop;
 
         // By default, slide loops only once.
         if (loop <= 0 && this.behavior === kBehaviorSlide)
             loop = 1;
 
         if (loop <= 0)
             return true;
         return this.loopCount_ < loop;
     };
 
     HTMLMarqueeElementPrototype.continue_ = function() {
         if (!this.shouldContinue_()) {
-            this.player_ = null;
-            this.dispatchEvent(new Event('finish', false, true));
+            return;
+        }
+
+        if (this.player_ && this.player_.playState === "paused") {
+            this.player_.play();
             return;
         }
 
         var parameters = this.getAnimationParameters_();
-
+        var scrollDelay = this.scrollDelay;
+        if (scrollDelay < kMinimumScrollDelayMS && !this.trueSpeed)
+            scrollDelay = kDefaultScrollDelayMS;
         var player = this.mover_.animate([
             { transform: parameters.transformBegin },
             { transform: parameters.transformEnd },
         ], {
-            duration: parameters.distance * this.scrollDelay / this.scrollAmount,
+            duration: parameters.distance * scrollDelay / this.scrollAmount,
             fill: 'forwards',
         });
+        player.marquee_ = this;
+        player.onfinish = animationFinished_;
 
         this.player_ = player;
-
-        player.addEventListener('finish', function() {
-            if (player != this.player_)
-                return;
-            ++this.loopCount_;
-            this.continue_();
-            if (this.player_ && this.behavior === kBehaviorAlternate)
-                this.dispatchEvent(new Event('bounce', false, true));
-        }.bind(this));
     };
 
     HTMLMarqueeElementPrototype.start = function() {
-        if (this.continueCallback_ || this.player_)
+        if (this.continueCallback_)
             return;
         this.continueCallback_ = requestAnimationFrame(function() {
             this.continueCallback_ = null;
             this.continue_();
         }.bind(this));
-        this.dispatchEvent(new Event('start', false, true));
     };
 
     HTMLMarqueeElementPrototype.stop = function() {
-        if (!this.continueCallback_ && !this.player_)
-            return;
-
         if (this.continueCallback_) {
             cancelAnimationFrame(this.continueCallback_);
             this.continueCallback_ = null;
             return;
         }
 
-        // FIXME: Rather than canceling the animation, we really should just
-        // pause the animation, but the pause function is still flagged as
-        // experimental.
         if (this.player_) {
-            var player = this.player_;
-            this.player_ = null;
-            player.cancel();
+            this.player_.pause();
         }
     };
-
-    // FIXME: We have to inject this HTMLMarqueeElement as a custom element in order to make
-    // createdCallback, attachedCallback, detachedCallback and attributeChangedCallback workable.
-    // document.registerElement('i-marquee', {
-    //    prototype: HTMLMarqueeElementPrototype,
-    // });
 });