Changeset 207111 in webkit


Ignore:
Timestamp:
Oct 11, 2016 5:52:28 AM (8 years ago)
Author:
commit-queue@webkit.org
Message:

[Modern Media Controls] Buttons container
​https://bugs.webkit.org/show_bug.cgi?id=163238
<rdar://problem/28701864>

Patch by Antoine Quint <Antoine Quint> on 2016-10-11
Reviewed by Dean Jackson.

Source/WebCore:

We add a new ButtonsContainer class which contains a group of Button objects
and positions them based on the provided padding and margin between buttons.
Buttons that aren't enabled or marked as dropped are not added to the tree of
LayoutNodes, and thus the DOM.

Additionally, we fix a few issues we found while working on tests for ButtonsContainer
where LayoutNodes would schedule layout callbacks even when they would not do any work
during the layout callback due to not resetting the needsLayout flag to false and
removing any scheduled tasks when a layout was completed.

Finally, we fix a few style issues that had not been caught so far and an unused
size property on IconButton.

Tests: media/modern-media-controls/buttons-container/buttons-container-buttons-property.html

media/modern-media-controls/buttons-container/buttons-container-constructor.html
media/modern-media-controls/buttons-container/buttons-container-layout.html

  • Modules/modern-media-controls/controls/airplay-button.js:

(AirplayButton.prototype.set on):
(AirplayButton):

  • Modules/modern-media-controls/controls/buttons-container.css:

(.buttons-container):

  • Modules/modern-media-controls/controls/buttons-container.js:

(ButtonsContainer.prototype.get buttons):
(ButtonsContainer.prototype.set buttons):
(ButtonsContainer.prototype.layout):

  • Modules/modern-media-controls/controls/icon-button.js:
  • Modules/modern-media-controls/controls/layout-node.js:

(LayoutNode.prototype.set needsLayout):
(LayoutNode.prototype.markDirtyProperty):
(LayoutNode.prototype._markNodeManipulation):
(LayoutNode.prototype._updateDirtyState):
(performScheduledLayout):
(elementFromString):

  • Modules/modern-media-controls/controls/scheduler.js:

(const.scheduler.new.prototype.unscheduleLayout):

LayoutTests:

Adding tests for the new ButtonsContainer class.

  • media/modern-media-controls/buttons-container/buttons-container-buttons-property-expected.txt: Added.
  • media/modern-media-controls/buttons-container/buttons-container-buttons-property.html: Added.
  • media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt: Added.
  • media/modern-media-controls/buttons-container/buttons-container-constructor.html: Added.
  • media/modern-media-controls/buttons-container/buttons-container-layout-expected.txt: Added.
  • media/modern-media-controls/buttons-container/buttons-container-layout.html: Added.
Location:
trunk
Files:
9 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r207086 r207111  
     12016-10-11  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Buttons container
     4        https://bugs.webkit.org/show_bug.cgi?id=163238
     5        <rdar://problem/28701864>
     6
     7        Reviewed by Dean Jackson.
     8
     9        Adding tests for the new ButtonsContainer class.
     10
     11        * media/modern-media-controls/buttons-container/buttons-container-buttons-property-expected.txt: Added.
     12        * media/modern-media-controls/buttons-container/buttons-container-buttons-property.html: Added.
     13        * media/modern-media-controls/buttons-container/buttons-container-constructor-expected.txt: Added.
     14        * media/modern-media-controls/buttons-container/buttons-container-constructor.html: Added.
     15        * media/modern-media-controls/buttons-container/buttons-container-layout-expected.txt: Added.
     16        * media/modern-media-controls/buttons-container/buttons-container-layout.html: Added.
     17
    1182016-10-11  Youenn Fablet  <youenn@apple.com>
    219

  • trunk/Source/WebCore/ChangeLog

    r207086 r207111  
     12016-10-11  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Buttons container
     4        https://bugs.webkit.org/show_bug.cgi?id=163238
     5        <rdar://problem/28701864>
     6
     7        Reviewed by Dean Jackson.
     8
     9        We add a new ButtonsContainer class which contains a group of Button objects
     10        and positions them based on the provided padding and margin between buttons.
     11        Buttons that aren't enabled or marked as dropped are not added to the tree of
     12        LayoutNodes, and thus the DOM.
     13
     14        Additionally, we fix a few issues we found while working on tests for ButtonsContainer
     15        where LayoutNodes would schedule layout callbacks even when they would not do any work
     16        during the layout callback due to not resetting the `needsLayout` flag to false and
     17        removing any scheduled tasks when a layout was completed.
     18
     19        Finally, we fix a few style issues that had not been caught so far and an unused
     20        `size` property on IconButton.
     21
     22        Tests: media/modern-media-controls/buttons-container/buttons-container-buttons-property.html
     23               media/modern-media-controls/buttons-container/buttons-container-constructor.html
     24               media/modern-media-controls/buttons-container/buttons-container-layout.html
     25
     26        * Modules/modern-media-controls/controls/airplay-button.js:
     27        (AirplayButton.prototype.set on):
     28        (AirplayButton):
     29        * Modules/modern-media-controls/controls/buttons-container.css:
     30        (.buttons-container):
     31        * Modules/modern-media-controls/controls/buttons-container.js:
     32        (ButtonsContainer.prototype.get buttons):
     33        (ButtonsContainer.prototype.set buttons):
     34        (ButtonsContainer.prototype.layout):
     35        * Modules/modern-media-controls/controls/icon-button.js:
     36        * Modules/modern-media-controls/controls/layout-node.js:
     37        (LayoutNode.prototype.set needsLayout):
     38        (LayoutNode.prototype.markDirtyProperty):
     39        (LayoutNode.prototype._markNodeManipulation):
     40        (LayoutNode.prototype._updateDirtyState):
     41        (performScheduledLayout):
     42        (elementFromString):
     43        * Modules/modern-media-controls/controls/scheduler.js:
     44        (const.scheduler.new.prototype.unscheduleLayout):
     45
    1462016-10-11  Youenn Fablet  <youenn@apple.com>
    247

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js

    r207015 r207111  
    4040        if (!!iconName)
    4141            this.iconName = iconName;
    42 
    43         this.size = { width: 0, height: 0 };
    4442    }
    4543

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js

    r206686 r207111  
    9696            return;
    9797
    98         this._needsLayout = true;
     98        this._needsLayout = flag;
    9999        this._updateDirtyState();
    100100    }
    … …  
    168168    }
    169169
    170     markDirtyProperty(propertyName) {
     170    markDirtyProperty(propertyName)
     171    {
    171172        const hadProperty = this._dirtyProperties.has(propertyName);
    172173        this._dirtyProperties.add(propertyName);
    … …  
    218219    // Private
    219220
    220     _markNodeManipulation(manipulation) {
     221    _markNodeManipulation(manipulation)
     222    {
    221223        this._pendingDOMManipulation = manipulation;
    222224        this._updateDirtyState();
    223225    }
    224226
    225     _updateDirtyState() {
     227    _updateDirtyState()
     228    {
    226229        if (this.needsLayout) {
    227230            dirtyNodes.add(this);
    228231            scheduler.scheduleLayout(performScheduledLayout);
    229         } else
    230             dirtyNodes.delete(node);
     232        } else {
     233            dirtyNodes.delete(this);
     234            if (dirtyNodes.size === 0)
     235                scheduler.unscheduleLayout(performScheduledLayout);
     236        }
    231237    }
    232238
    … …  
    256262};
    257263
    258 function performScheduledLayout() {
    259     dirtyNodes.forEach(node => node.layout());
     264function performScheduledLayout()
     265{
     266    dirtyNodes.forEach(node => {
     267        node.needsLayout = false;
     268        node.layout()
     269    });
    260270    dirtyNodes.clear();
     271    scheduler.unscheduleLayout(performScheduledLayout);
    261272
    262273    nodesRequiringChildrenUpdate.forEach(node => node._updateChildren());
    … …  
    264275}
    265276
    266 function elementFromString(elementString) {
     277function elementFromString(elementString)
     278{
    267279    const element = document.createElement("div");
    268280    element.innerHTML = elementString;

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/scheduler.js

    r206606 r207111  
    1818        this._layoutCallbacks.add(callback);
    1919        this._requestFrameIfNeeded();
     20    }
     21
     22    unscheduleLayout(callback)
     23    {
     24        if (typeof callback !== "function")
     25            return;
     26
     27        this._layoutCallbacks.delete(callback);
    2028    }
    2129
Note: See TracChangeset for help on using the changeset viewer.