From cbf9b31feaef823d29c7de717abe8c4fe79e099b Mon Sep 17 00:00:00 2001 From: Keith Yeung Date: Wed, 12 Oct 2016 02:08:37 -0500 Subject: [PATCH] servo: Merge #13056 - Implement transition event and infrastructure (from KiChjang:transition-event); r=mbrubeck Fixes #10245. Source-Repo: https://github.com/servo/servo Source-Revision: cd2f950de3bcbf88208dec16f7025ff516473e0d --- servo/components/layout/animation.rs | 12 ++- servo/components/layout_thread/lib.rs | 1 + servo/components/script/dom/bindings/js.rs | 8 ++ servo/components/script/dom/macros.rs | 1 + servo/components/script/dom/mod.rs | 1 + .../components/script/dom/transitionevent.rs | 76 +++++++++++++++++++ .../script/dom/webidls/EventHandler.webidl | 5 ++ .../script/dom/webidls/TransitionEvent.webidl | 21 +++++ servo/components/script/layout_wrapper.rs | 2 +- servo/components/script/script_thread.rs | 38 ++++++++++ servo/components/script_traits/lib.rs | 5 +- servo/components/style/animation.rs | 23 +++--- servo/components/style/dom.rs | 4 +- servo/components/style/matching.rs | 1 + .../helpers/animated_properties.mako.rs | 10 +++ servo/components/style_traits/lib.rs | 4 + 16 files changed, 196 insertions(+), 16 deletions(-) create mode 100644 servo/components/script/dom/transitionevent.rs create mode 100644 servo/components/script/dom/webidls/TransitionEvent.webidl diff --git a/servo/components/layout/animation.rs b/servo/components/layout/animation.rs index 71a388dcf0ca..22387dff5621 100644 --- a/servo/components/layout/animation.rs +++ b/servo/components/layout/animation.rs @@ -10,7 +10,7 @@ use gfx::display_list::OpaqueNode; use ipc_channel::ipc::IpcSender; use msg::constellation_msg::PipelineId; use script_layout_interface::restyle_damage::RestyleDamage; -use script_traits::{AnimationState, LayoutMsg as ConstellationMsg}; +use script_traits::{AnimationState, ConstellationControlMsg, LayoutMsg as ConstellationMsg}; use std::collections::HashMap; use std::sync::mpsc::Receiver; use style::animation::{Animation, update_style_for_animation}; @@ -21,6 +21,7 @@ use style::timer::Timer; /// Also expire any old animations that have completed, inserting them into /// `expired_animations`. pub fn update_animation_state(constellation_chan: &IpcSender, + script_chan: &IpcSender, running_animations: &mut HashMap>, expired_animations: &mut HashMap>, new_animations_receiver: &Receiver, @@ -70,7 +71,7 @@ pub fn update_animation_state(constellation_chan: &IpcSender, let mut animations_still_running = vec![]; for mut running_animation in running_animations.drain(..) { let still_running = !running_animation.is_expired() && match running_animation { - Animation::Transition(_, started_at, ref frame, _expired) => { + Animation::Transition(_, _, started_at, ref frame, _expired) => { now < started_at + frame.duration } Animation::Keyframes(_, _, ref mut state) => { @@ -85,6 +86,13 @@ pub fn update_animation_state(constellation_chan: &IpcSender, continue } + if let Animation::Transition(_, unsafe_node, _, ref frame, _) = running_animation { + script_chan.send(ConstellationControlMsg::TransitionEnd(unsafe_node, + frame.property_animation.property_name(), + frame.duration)) + .unwrap(); + } + expired_animations.entry(*key) .or_insert_with(Vec::new) .push(running_animation); diff --git a/servo/components/layout_thread/lib.rs b/servo/components/layout_thread/lib.rs index 4797b8814aac..026e9796883f 100644 --- a/servo/components/layout_thread/lib.rs +++ b/servo/components/layout_thread/lib.rs @@ -1477,6 +1477,7 @@ impl LayoutThread { if let Some(mut root_flow) = self.root_flow.clone() { // Kick off animations if any were triggered, expire completed ones. animation::update_animation_state(&self.constellation_chan, + &self.script_chan, &mut *self.running_animations.write().unwrap(), &mut *self.expired_animations.write().unwrap(), &self.new_animations_receiver, diff --git a/servo/components/script/dom/bindings/js.rs b/servo/components/script/dom/bindings/js.rs index c35b4905ceb3..779cb62d6342 100644 --- a/servo/components/script/dom/bindings/js.rs +++ b/servo/components/script/dom/bindings/js.rs @@ -451,6 +451,14 @@ impl LayoutJS { debug_assert!(thread_state::get().is_layout()); *self.ptr } + + /// Returns a reference to the interior of this JS object. This method is + /// safe to call because it originates from the layout thread, and it cannot + /// mutate DOM nodes. + pub fn get_for_script(&self) -> &T { + debug_assert!(thread_state::get().is_script()); + unsafe { &**self.ptr } + } } /// Get a reference out of a rooted value. diff --git a/servo/components/script/dom/macros.rs b/servo/components/script/dom/macros.rs index e69255b6aed1..5935f02cde2a 100644 --- a/servo/components/script/dom/macros.rs +++ b/servo/components/script/dom/macros.rs @@ -472,6 +472,7 @@ macro_rules! global_event_handlers( event_handler!(suspend, GetOnsuspend, SetOnsuspend); event_handler!(timeupdate, GetOntimeupdate, SetOntimeupdate); event_handler!(toggle, GetOntoggle, SetOntoggle); + event_handler!(transitionend, GetOntransitionend, SetOntransitionend); event_handler!(volumechange, GetOnvolumechange, SetOnvolumechange); event_handler!(waiting, GetOnwaiting, SetOnwaiting); ) diff --git a/servo/components/script/dom/mod.rs b/servo/components/script/dom/mod.rs index afc91be7c4ba..4c6c7c941c40 100644 --- a/servo/components/script/dom/mod.rs +++ b/servo/components/script/dom/mod.rs @@ -404,6 +404,7 @@ pub mod textencoder; pub mod touch; pub mod touchevent; pub mod touchlist; +pub mod transitionevent; pub mod treewalker; pub mod uievent; pub mod url; diff --git a/servo/components/script/dom/transitionevent.rs b/servo/components/script/dom/transitionevent.rs new file mode 100644 index 000000000000..fc454483f50c --- /dev/null +++ b/servo/components/script/dom/transitionevent.rs @@ -0,0 +1,76 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +use dom::bindings::codegen::Bindings::EventBinding::EventMethods; +use dom::bindings::codegen::Bindings::TransitionEventBinding; +use dom::bindings::codegen::Bindings::TransitionEventBinding::{TransitionEventInit, TransitionEventMethods}; +use dom::bindings::error::Fallible; +use dom::bindings::inheritance::Castable; +use dom::bindings::js::Root; +use dom::bindings::num::Finite; +use dom::bindings::reflector::reflect_dom_object; +use dom::bindings::str::DOMString; +use dom::event::Event; +use dom::globalscope::GlobalScope; +use string_cache::Atom; + +#[dom_struct] +pub struct TransitionEvent { + event: Event, + property_name: Atom, + elapsed_time: Finite, + pseudo_element: DOMString, +} + +impl TransitionEvent { + pub fn new_inherited(init: &TransitionEventInit) -> TransitionEvent { + TransitionEvent { + event: Event::new_inherited(), + property_name: Atom::from(init.propertyName.clone()), + elapsed_time: init.elapsedTime.clone(), + pseudo_element: init.pseudoElement.clone() + } + } + + pub fn new(global: &GlobalScope, + type_: Atom, + init: &TransitionEventInit) -> Root { + let ev = reflect_dom_object(box TransitionEvent::new_inherited(init), + global, + TransitionEventBinding::Wrap); + { + let event = ev.upcast::(); + event.init_event(type_, init.parent.bubbles, init.parent.cancelable); + } + ev + } + + pub fn Constructor(global: &GlobalScope, + type_: DOMString, + init: &TransitionEventInit) -> Fallible> { + Ok(TransitionEvent::new(global, Atom::from(type_), init)) + } +} + +impl TransitionEventMethods for TransitionEvent { + // https://drafts.csswg.org/css-transitions/#Events-TransitionEvent-propertyName + fn PropertyName(&self) -> DOMString { + DOMString::from(&*self.property_name) + } + + // https://drafts.csswg.org/css-transitions/#Events-TransitionEvent-elapsedTime + fn ElapsedTime(&self) -> Finite { + self.elapsed_time.clone() + } + + // https://drafts.csswg.org/css-transitions/#Events-TransitionEvent-pseudoElement + fn PseudoElement(&self) -> DOMString { + self.pseudo_element.clone() + } + + // https://dom.spec.whatwg.org/#dom-event-istrusted + fn IsTrusted(&self) -> bool { + self.upcast::().IsTrusted() + } +} diff --git a/servo/components/script/dom/webidls/EventHandler.webidl b/servo/components/script/dom/webidls/EventHandler.webidl index 1af56394c35f..1ffa128e1283 100644 --- a/servo/components/script/dom/webidls/EventHandler.webidl +++ b/servo/components/script/dom/webidls/EventHandler.webidl @@ -89,6 +89,11 @@ interface GlobalEventHandlers { attribute EventHandler onwaiting; }; +// https://drafts.csswg.org/css-transitions/#interface-globaleventhandlers-idl +partial interface GlobalEventHandlers { + attribute EventHandler ontransitionend; +}; + // https://html.spec.whatwg.org/multipage/#windoweventhandlers [NoInterfaceObject, Exposed=(Window,Worker)] interface WindowEventHandlers { diff --git a/servo/components/script/dom/webidls/TransitionEvent.webidl b/servo/components/script/dom/webidls/TransitionEvent.webidl new file mode 100644 index 000000000000..5e7a3ff69139 --- /dev/null +++ b/servo/components/script/dom/webidls/TransitionEvent.webidl @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* + * For more information on this interface please see + * https://dom.spec.whatwg.org/#event + */ + +[Constructor(DOMString type, optional TransitionEventInit transitionEventInitDict), + Exposed=Window] +interface TransitionEvent : Event { + readonly attribute DOMString propertyName; + readonly attribute float elapsedTime; + readonly attribute DOMString pseudoElement; +}; + +dictionary TransitionEventInit : EventInit { + DOMString propertyName = ""; + float elapsedTime = 0.0; + DOMString pseudoElement = ""; +}; diff --git a/servo/components/script/layout_wrapper.rs b/servo/components/script/layout_wrapper.rs index f2947bedc939..451cfe82623c 100644 --- a/servo/components/script/layout_wrapper.rs +++ b/servo/components/script/layout_wrapper.rs @@ -413,7 +413,7 @@ impl<'ln> ServoLayoutNode<'ln> { /// Returns the interior of this node as a `LayoutJS`. This is highly unsafe for layout to /// call and as such is marked `unsafe`. - unsafe fn get_jsmanaged(&self) -> &LayoutJS { + pub unsafe fn get_jsmanaged(&self) -> &LayoutJS { &self.node } } diff --git a/servo/components/script/script_thread.rs b/servo/components/script/script_thread.rs index 38f421f4883f..dfd5b0300b31 100644 --- a/servo/components/script/script_thread.rs +++ b/servo/components/script/script_thread.rs @@ -23,13 +23,17 @@ use devtools_traits::{ScriptToDevtoolsControlMsg, WorkerId}; use devtools_traits::CSSError; use document_loader::DocumentLoader; use dom::bindings::cell::DOMRefCell; +use dom::bindings::codegen::Bindings::CSSStyleDeclarationBinding::CSSStyleDeclarationMethods; use dom::bindings::codegen::Bindings::DocumentBinding::{DocumentMethods, DocumentReadyState}; +use dom::bindings::codegen::Bindings::EventBinding::EventInit; use dom::bindings::codegen::Bindings::LocationBinding::LocationMethods; +use dom::bindings::codegen::Bindings::TransitionEventBinding::TransitionEventInit; use dom::bindings::codegen::Bindings::WindowBinding::WindowMethods; use dom::bindings::conversions::{ConversionResult, FromJSValConvertible, StringificationBehavior}; use dom::bindings::inheritance::Castable; use dom::bindings::js::{JS, MutNullableHeap, Root, RootCollection}; use dom::bindings::js::{RootCollectionPtr, RootedReference}; +use dom::bindings::num::Finite; use dom::bindings::refcounted::Trusted; use dom::bindings::reflector::Reflectable; use dom::bindings::str::DOMString; @@ -47,6 +51,7 @@ use dom::serviceworkerregistration::ServiceWorkerRegistration; use dom::servoparser::{ParserContext, ServoParser}; use dom::servoparser::html::{ParseContext, parse_html}; use dom::servoparser::xml::{self, parse_xml}; +use dom::transitionevent::TransitionEvent; use dom::uievent::UIEvent; use dom::window::{ReflowReason, Window}; use dom::worker::TrustedWorkerAddress; @@ -65,6 +70,7 @@ use js::jsapi::{JSAutoCompartment, JSContext, JS_SetWrapObjectCallbacks}; use js::jsapi::{JSTracer, SetWindowProxyClass}; use js::jsval::UndefinedValue; use js::rust::Runtime; +use layout_wrapper::ServoLayoutNode; use mem::heap_size_of_self_and_children; use msg::constellation_msg::{FrameType, LoadData, PipelineId, PipelineNamespace}; use msg::constellation_msg::{ReferrerPolicy, WindowSizeType}; @@ -97,6 +103,7 @@ use std::sync::{Arc, Mutex}; use std::sync::atomic::{AtomicBool, Ordering}; use std::sync::mpsc::{Receiver, Select, Sender, channel}; use style::context::ReflowGoal; +use style::dom::{TNode, UnsafeNode}; use style::thread_state; use task_source::TaskSource; use task_source::dom_manipulation::{DOMManipulationTask, DOMManipulationTaskSource}; @@ -917,6 +924,8 @@ impl ScriptThread { self.handle_webdriver_msg(pipeline_id, msg), ConstellationControlMsg::TickAllAnimations(pipeline_id) => self.handle_tick_all_animations(pipeline_id), + ConstellationControlMsg::TransitionEnd(unsafe_node, name, duration) => + self.handle_transition_event(unsafe_node, name, duration), ConstellationControlMsg::WebFontLoaded(pipeline_id) => self.handle_web_font_loaded(pipeline_id), ConstellationControlMsg::DispatchFrameLoadEvent { @@ -1522,6 +1531,35 @@ impl ScriptThread { document.run_the_animation_frame_callbacks(); } + /// Handles firing of transition events. + #[allow(unsafe_code)] + fn handle_transition_event(&self, unsafe_node: UnsafeNode, name: String, duration: f64) { + let node = unsafe { ServoLayoutNode::from_unsafe(&unsafe_node) }; + let node = unsafe { node.get_jsmanaged().get_for_script() }; + let window = window_from_node(node); + + if let Some(el) = node.downcast::() { + if &*window.GetComputedStyle(el, None).Display() == "none" { + return; + } + } + + let init = TransitionEventInit { + parent: EventInit { + bubbles: true, + cancelable: false, + }, + propertyName: DOMString::from(name), + elapsedTime: Finite::new(duration as f32).unwrap(), + // FIXME: Handle pseudo-elements properly + pseudoElement: DOMString::new() + }; + let transition_event = TransitionEvent::new(window.upcast(), + atom!("transitionend"), + &init); + transition_event.upcast::().fire(node.upcast()); + } + /// Handles a Web font being loaded. Does nothing if the page no longer exists. fn handle_web_font_loaded(&self, pipeline_id: PipelineId) { if let Some(context) = self.find_child_context(pipeline_id) { diff --git a/servo/components/script_traits/lib.rs b/servo/components/script_traits/lib.rs index 2220a9cf2e11..c5fa8fee4e6a 100644 --- a/servo/components/script_traits/lib.rs +++ b/servo/components/script_traits/lib.rs @@ -66,7 +66,7 @@ use serde::{Deserialize, Deserializer, Serialize, Serializer}; use std::collections::HashMap; use std::fmt; use std::sync::mpsc::{Receiver, Sender}; -use style_traits::{PagePx, ViewportPx}; +use style_traits::{PagePx, UnsafeNode, ViewportPx}; use url::Url; use util::ipc::OptionalOpaqueIpcSender; use webdriver_msg::{LoadStatus, WebDriverScriptCommand}; @@ -197,6 +197,8 @@ pub enum ConstellationControlMsg { WebDriverScriptCommand(PipelineId, WebDriverScriptCommand), /// Notifies script thread that all animations are done TickAllAnimations(PipelineId), + /// Notifies the script thread of a transition end + TransitionEnd(UnsafeNode, String, f64), /// Notifies the script thread that a new Web font has been loaded, and thus the page should be /// reflowed. WebFontLoaded(PipelineId), @@ -238,6 +240,7 @@ impl fmt::Debug for ConstellationControlMsg { FocusIFrame(..) => "FocusIFrame", WebDriverScriptCommand(..) => "WebDriverScriptCommand", TickAllAnimations(..) => "TickAllAnimations", + TransitionEnd(..) => "TransitionEnd", WebFontLoaded(..) => "WebFontLoaded", DispatchFrameLoadEvent { .. } => "DispatchFrameLoadEvent", FramedContentChanged(..) => "FramedContentChanged", diff --git a/servo/components/style/animation.rs b/servo/components/style/animation.rs index 9e55ca2e52a9..bf74fa643f2f 100644 --- a/servo/components/style/animation.rs +++ b/servo/components/style/animation.rs @@ -6,7 +6,7 @@ use bezier::Bezier; use context::SharedStyleContext; -use dom::OpaqueNode; +use dom::{OpaqueNode, UnsafeNode}; use euclid::point::Point2D; use keyframes::{KeyframesStep, KeyframesStepValue}; use properties::{self, ComputedValues, Importance}; @@ -186,7 +186,7 @@ pub enum Animation { /// the f64 field is the start time as returned by `time::precise_time_s()`. /// /// The `bool` field is werther this animation should no longer run. - Transition(OpaqueNode, f64, AnimationFrame, bool), + Transition(OpaqueNode, UnsafeNode, f64, AnimationFrame, bool), /// A keyframes animation is identified by a name, and can have a /// node-dependent state (i.e. iteration count, etc.). Keyframes(OpaqueNode, Atom, KeyframesAnimationState), @@ -197,7 +197,7 @@ impl Animation { pub fn mark_as_expired(&mut self) { debug_assert!(!self.is_expired()); match *self { - Animation::Transition(_, _, _, ref mut expired) => *expired = true, + Animation::Transition(_, _, _, _, ref mut expired) => *expired = true, Animation::Keyframes(_, _, ref mut state) => state.expired = true, } } @@ -205,7 +205,7 @@ impl Animation { #[inline] pub fn is_expired(&self) -> bool { match *self { - Animation::Transition(_, _, _, expired) => expired, + Animation::Transition(_, _, _, _, expired) => expired, Animation::Keyframes(_, _, ref state) => state.expired, } } @@ -213,7 +213,7 @@ impl Animation { #[inline] pub fn node(&self) -> &OpaqueNode { match *self { - Animation::Transition(ref node, _, _, _) => node, + Animation::Transition(ref node, _, _, _, _) => node, Animation::Keyframes(ref node, _, _) => node, } } @@ -246,6 +246,10 @@ pub struct PropertyAnimation { } impl PropertyAnimation { + pub fn property_name(&self) -> String { + self.property.name() + } + /// Creates a new property animation for the given transition index and old and new styles. /// Any number of animations may be returned, from zero (if the property did not animate) to /// one (for a single transition property) to arbitrarily many (for `all`). @@ -341,7 +345,8 @@ impl PropertyAnimation { // TODO(emilio): Take rid of this mutex splitting SharedLayoutContex into a // cloneable part and a non-cloneable part.. pub fn start_transitions_if_applicable(new_animations_sender: &Sender, - node: OpaqueNode, + opaque_node: OpaqueNode, + unsafe_node: UnsafeNode, old_style: &ComputedValues, new_style: &mut Arc, timer: &Timer) @@ -362,7 +367,7 @@ pub fn start_transitions_if_applicable(new_animations_sender: &Sender let start_time = now + (box_style.transition_delay_mod(i).seconds() as f64); new_animations_sender - .send(Animation::Transition(node, start_time, AnimationFrame { + .send(Animation::Transition(opaque_node, unsafe_node, start_time, AnimationFrame { duration: box_style.transition_duration_mod(i).seconds() as f64, property_animation: property_animation, }, /* is_expired = */ false)).unwrap(); @@ -499,7 +504,7 @@ pub fn update_style_for_animation(context: &SharedStyleContext, debug_assert!(!animation.is_expired()); match *animation { - Animation::Transition(_, start_time, ref frame, _) => { + Animation::Transition(_, _, start_time, ref frame, _) => { debug!("update_style_for_animation: transition found"); let now = context.timer.seconds(); let mut new_style = (*style).clone(); @@ -673,7 +678,7 @@ pub fn complete_expired_transitions(node: OpaqueNode, style: &mut Arc String { + match *self { + % for prop in data.longhands: + % if prop.animatable: + AnimatedProperty::${prop.camel_case}(..) => "${prop.name}".to_owned(), + % endif + % endfor + } + } + pub fn does_animate(&self) -> bool { match *self { % for prop in data.longhands: diff --git a/servo/components/style_traits/lib.rs b/servo/components/style_traits/lib.rs index 54657108341b..449aca96ee35 100644 --- a/servo/components/style_traits/lib.rs +++ b/servo/components/style_traits/lib.rs @@ -27,6 +27,10 @@ extern crate rustc_serialize; #[cfg(feature = "servo")] extern crate serde; #[cfg(feature = "servo")] #[macro_use] extern crate serde_derive; +/// Opaque type stored in type-unsafe work queues for parallel layout. +/// Must be transmutable to and from TNode. +pub type UnsafeNode = (usize, usize); + /// One CSS "px" in the coordinate system of the "initial viewport": /// http://www.w3.org/TR/css-device-adapt/#initial-viewport ///