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(global) {
 
     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;
-            },
-        });
-    }
-
     var HTMLMarqueeElementPrototype = Object.create(HTMLElement.prototype);
 
     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');

[haraken, 2014/07/15 12:57:07]

I removed these event handlers, since we haven't yet supported these event
handlers in Blink.

-
     HTMLMarqueeElementPrototype.createdCallback = function() {

[haraken, 2014/07/15 12:57:07]

abarth@: When and how are you assuming that these callbacks are called back? In
my understanding:

- createCallback should be called from C++ when the marquee element is created.

- detachedCallback should be called from C++ when ActiveDOMObject is suspended.

- attachedCallback should be called from C++ when ActiveDOMObject is resumed.

- attributeChangedCallback should be called from C++ when
RenderMarquee::styleDidChange is called.

- We'll be able to get rid of almost all implementations from
HTMLMarqueeElement.cpp and RenderMarquee.cpp, but a couple of code will stay
there to invoke those callbacks in private scripts.

Am I understanding correctly?

[abarth-chromium, 2014/07/15 17:10:07]

These callbacks are all defined by
http://w3c.github.io/webcomponents/spec/custom/.  You shouldn't have to write
any code to trigger these callbacks.  All the machinery should already exist. 
Take a look at V8CustomElementLifecycleCallbacks, which knows how to call the
callbacks.  If you run the <i-marquee> script in a normal page, you can set some
breakpoints in V8CustomElementLifecycleCallbacks to see how the callbacks get
called.

The machinery for calling these callbacks seems to already understand isolated
worlds.  We just need to create them in the proper v8::Context, presumably
around the time the HTMLMarqueeElement is created by the HTMLElementFactory.
We'll be able to delete RenderMarquee entirely.  I think we can delete almost
all of HTMLMarqueeElement.  We'll need to keep just enough to register the
custom script version as a custom element.

         var shadow = this.createShadowRoot();
         var style = global.document.createElement('style');
     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 = global.document.createElement('div');
         shadow.appendChild(mover);
 
         mover.appendChild(global.document.createElement('content'));
@@ skipping 221 matching lines @@
             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;
         }
 
         var parameters = this.getAnimationParameters_();
 
         var player = this.mover_.animate([
             { transform: parameters.transformBegin },
             { transform: parameters.transformEnd },
         ], {
             duration: parameters.distance * this.scrollDelay / this.scrollAmount,
             fill: 'forwards',
         });
 
         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_)
             return;
         this.continueCallback_ = global.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_) {
             global.cancelAnimationFrame(this.continueCallback_);
             this.continueCallback_ = null;
             return;
@@ skipping 10 matching lines @@
     };
 
     // FIXME: We have to inject this HTMLMarqueeElement as a custom element in order to make
     // createdCallback, attachedCallback, detachedCallback and attributeChangedCallback workable.
     // global.document.registerElement('i-marquee', {
     //    prototype: HTMLMarqueeElementPrototype,
     // });
 
     return HTMLMarqueeElementPrototype;
 });