Change description: The Resize Observer API can be used to observe changes to Element's clientWidth and clientHeight. Changes to API surface: * A new interface ResizeObserver, and related Entry and Callback interfaces. Links: Spec: https://wicg.github.io/ResizeObserver/ Repository: https://github.com/WICG/ResizeObserver/ Public standards discussion: https://github.com/WICG/ResizeObserver/issues Support in other browsers: Microsoft: positive https://developer.microsoft.com/en-us/microsoft-edge/platform/status/resizeobserver/ Firefox: positive https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 Safari: positive https://bugs.webkit.org/show_bug.cgi?id=157743
Regarding support in other browsers: we had a good discussion in CSSWG f2f. They did not hate it, and we got tracking bugs. None of the browsers signaled intent to implement.
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/7d1f9d52e374d32549ace497895d3d2c7b5667b4 commit 7d1f9d52e374d32549ace497895d3d2c7b5667b4 Author: atotic <atotic@google.com> Date: Tue Jul 19 18:45:19 2016 ResizeObserver pt1: IDLs with stubs Full ResizeObserver implementation has been split into 7 parts for cleaner review. Part 1 is just ResizeObserver IDLs + stubs Original patch archived at https://codereview.chromium.org/2005593002 BUG=612962 Review-Url: https://codereview.chromium.org/2159883003 Cr-Commit-Position: refs/heads/master@{#406333} [modify] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt [modify] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/core.gypi [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserver.cpp [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserver.h [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserver.idl [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserverCallback.h [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserverCallback.idl [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserverEntry.cpp [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserverEntry.h [add] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/core/observer/ResizeObserverEntry.idl [modify] https://crrev.com/7d1f9d52e374d32549ace497895d3d2c7b5667b4/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6c23d97a65d8568329a386bd1da1df27d8d0a893 commit 6c23d97a65d8568329a386bd1da1df27d8d0a893 Author: atotic <atotic@google.com> Date: Fri Jul 22 06:50:33 2016 ResizeObserver implementation, part 2: lifetime The plot thickens: This checkin introduces all the classes, and the links between them. The links are important for object lifetime management. Lifetime architecture is described at https://docs.google.com/document/d/1G4OmqqlFY3H3erQAUmteKES02-bIECikDjWBrDKH9PA/edit?usp=sharing BUG=612962 ResizeObserver: conecting Objects Review-Url: https://codereview.chromium.org/2161313002 Cr-Commit-Position: refs/heads/master@{#407088} [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/core.gypi [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/Document.cpp [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/Document.h [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/ElementRareData.cpp [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/dom/ElementRareData.h [add] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObservation.cpp [add] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObservation.h [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserver.cpp [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserver.h [add] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserverController.cpp [add] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserverController.h [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserverEntry.cpp [modify] https://crrev.com/6c23d97a65d8568329a386bd1da1df27d8d0a893/third_party/WebKit/Source/core/observer/ResizeObserverEntry.h
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/03e20c08515f228ac05c74aca0645d3bf6ab1598 commit 03e20c08515f228ac05c74aca0645d3bf6ab1598 Author: atotic <atotic@google.com> Date: Tue Jul 26 08:29:07 2016 ResizeObserver pt3: observation computation This patch fills in ResizeObservation functionality: - computing/setting observation size - determining target depth ResizeObservation::getTargetSize is static because it will also get used by ResizeObserverEntry I've also included basic C++ tests. BUG=612962 Review-Url: https://codereview.chromium.org/2173203002 Cr-Commit-Position: refs/heads/master@{#407736} [modify] https://crrev.com/03e20c08515f228ac05c74aca0645d3bf6ab1598/third_party/WebKit/Source/core/observer/ResizeObservation.cpp [modify] https://crrev.com/03e20c08515f228ac05c74aca0645d3bf6ab1598/third_party/WebKit/Source/core/observer/ResizeObservation.h [modify] https://crrev.com/03e20c08515f228ac05c74aca0645d3bf6ab1598/third_party/WebKit/Source/core/observer/ResizeObserver.h [add] https://crrev.com/03e20c08515f228ac05c74aca0645d3bf6ab1598/third_party/WebKit/Source/web/tests/ResizeObserverTest.cpp [modify] https://crrev.com/03e20c08515f228ac05c74aca0645d3bf6ab1598/third_party/WebKit/Source/web/web.gypi
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/a254bd8afdb92836a9b626cd5ff0789bb932d2ce commit a254bd8afdb92836a9b626cd5ff0789bb932d2ce Author: atotic <atotic@google.com> Date: Tue Jul 26 23:42:03 2016 ResizeObserver pt4: IDL methods Implements ResizeObserver and ResizeObserverEntry IDL calls. observe/unobserver connect ResizeObserver and Element through ElementRareData. ElementRareData has a map (ResizeObserver->ResizeObservation) Design doc at: https://docs.google.com/document/d/1G4OmqqlFY3H3erQAUmteKES02-bIECikDjWBrDKH9PA/edit?usp=sharing BUG=612962 Review-Url: https://codereview.chromium.org/2185533004 Cr-Commit-Position: refs/heads/master@{#407973} [modify] https://crrev.com/a254bd8afdb92836a9b626cd5ff0789bb932d2ce/third_party/WebKit/Source/core/observer/ResizeObserver.cpp [modify] https://crrev.com/a254bd8afdb92836a9b626cd5ff0789bb932d2ce/third_party/WebKit/Source/core/observer/ResizeObserverEntry.cpp [modify] https://crrev.com/a254bd8afdb92836a9b626cd5ff0789bb932d2ce/third_party/WebKit/Source/core/observer/ResizeObserverEntry.h
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5 commit 3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5 Author: atotic <atotic@google.com> Date: Sat Jul 30 07:03:29 2016 ResizeObserver pt5: size change notification This change implements size change notification algorithm. Design doc at https://docs.google.com/document/d/1G4OmqqlFY3H3erQAUmteKES02-bIECikDjWBrDKH9PA/edit?usp=sharing Size change notification We collect and deliver notifications about all Elements whose size has changed inside the event loop. The algorithm loops until all notifications are delivered, or it hits the depth limit. c = ResizeObserverController(); for (limit = c.gatherObservations(0); limit != ResizeObserverController::kDepthLimit; limit = c.gatherObservations(limit)) { c.deliverObservations(); } if (c.skippedObservations()) { c.clearObservations(); sendError() } For efficiency, we avoid continuosly polling all elements for size changes. Instead, an Element notifies ResizeObservation when its size might have changed. ResizeObservation propagates this change to ResizeObserver, which propagates to ResizeObserverController. All of them set a flag indicating that they might have been changed. The flag is cleared when observations are delivered. BUG=612962 Review-Url: https://codereview.chromium.org/2188983003 Cr-Commit-Position: refs/heads/master@{#408867} [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObservation.cpp [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObservation.h [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObserver.cpp [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObserver.h [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObserverController.cpp [modify] https://crrev.com/3d5b99673799a3067e9a5b8621f2b9ef2ff5d5d5/third_party/WebKit/Source/core/observer/ResizeObserverController.h
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5b49641e336ba9be7789cc0eb2511d415f4e6d5d commit 5b49641e336ba9be7789cc0eb2511d415f4e6d5d Author: atotic <atotic@google.com> Date: Fri Aug 12 17:42:46 2016 ResizeObserver pt6: integration Integrates ResizeObserver with the browser. 1) Element notifies ResizeObserver when its size might have changed. Operations that might change Element's observed size are trapped: Element::detachLayoutTree traps Element removal from DOM tree LayoutObject::setMayNeedPaintInvalidation traps size changes 2) Event loop integration FrameView::notifyResizeObserver implements it per spec. https://wicg.github.io/ResizeObserver/#html-event-loop 3) Tests LayoutTests/resize-observer is a comprehensive test suite. BUG=612962 Review-Url: https://codereview.chromium.org/2204503002 Cr-Commit-Position: refs/heads/master@{#411694} [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/eventloop.html [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/notify.html [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/observe.html [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/resources/iframe.html [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/resources/resizeTestHelper.js [add] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/LayoutTests/resize-observer/svg.html [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/frame/FrameView.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/frame/FrameView.h [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/LayoutBox.h [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGContainer.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGEllipse.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGImage.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGPath.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGRect.cpp [modify] https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d/third_party/WebKit/Source/core/layout/svg/LayoutSVGShape.cpp
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/3f41316c60eb95369602fde0ebf52e935a3a91d5 commit 3f41316c60eb95369602fde0ebf52e935a3a91d5 Author: atotic <atotic@google.com> Date: Tue Aug 16 03:00:07 2016 ResizeObserver pt6: integration Integrates ResizeObserver with the browser. 1) Element notifies ResizeObserver when its size might have changed. Operations that might change Element's observed size are trapped: Element::detachLayoutTree traps Element removal from DOM tree LayoutObject::setMayNeedPaintInvalidation traps size changes 2) Event loop integration FrameView::notifyResizeObserver implements it per spec. https://wicg.github.io/ResizeObserver/#html-event-loop 3) Tests LayoutTests/resize-observer is a comprehensive test suite. BUG=612962 Committed: https://crrev.com/5b49641e336ba9be7789cc0eb2511d415f4e6d5d Review-Url: https://codereview.chromium.org/2204503002 Cr-Original-Commit-Position: refs/heads/master@{#411694} Cr-Commit-Position: refs/heads/master@{#412149} [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/eventloop.html [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/notify.html [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/observe.html [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/resources/iframe.html [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/resources/resizeTestHelper.js [add] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/LayoutTests/resize-observer/svg.html [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/frame/FrameView.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/frame/FrameView.h [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/LayoutBox.h [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGContainer.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGEllipse.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGImage.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGPath.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGRect.cpp [modify] https://crrev.com/3f41316c60eb95369602fde0ebf52e935a3a91d5/third_party/WebKit/Source/core/layout/svg/LayoutSVGShape.cpp
The chromestatus entry for this feature seems to have the wrong launch bug link. https://www.chromestatus.com/feature/5705346022637568 links to issue 540528 instead of to this issue.
Fixed, thanks.
I've raised two issues: issue 641353 issue 641364 Not sure though if it's not too early to file bugs.
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/01cdf399a2720f0ac49cd3512c0cdfc8b0439f68 commit 01cdf399a2720f0ac49cd3512c0cdfc8b0439f68 Author: atotic <atotic@google.com> Date: Wed Aug 31 19:09:58 2016 A new C++ test for ResizeObserver GC. It tests whether ResizeObserver is kept alive by: - direct javascript reference - observing a live element. BUG=612962 Review-Url: https://codereview.chromium.org/2272163003 Cr-Commit-Position: refs/heads/master@{#415711} [modify] https://crrev.com/01cdf399a2720f0ac49cd3512c0cdfc8b0439f68/third_party/WebKit/Source/core/observer/ResizeObserverController.h [modify] https://crrev.com/01cdf399a2720f0ac49cd3512c0cdfc8b0439f68/third_party/WebKit/Source/web/tests/ResizeObserverTest.cpp
I just reported Issue 658593 . Could you have a look? ;)