- Revision
- 214386
- Author
- [email protected]
- Date
- 2017-03-24 16:32:14 -0700 (Fri, 24 Mar 2017)
Log Message
[Modern Media Controls] Remove placard icon if height is compressed
https://bugs.webkit.org/show_bug.cgi?id=167935
<rdar://problem/30397128>
Reviewed by Dean Jackson.
Source/WebCore:
We make the addition of certain Placard children conditional on the placard's metrics. Whenever the
media controls metrics changes, the placard, if any, is set to have the same metrics and layout() is
called where we ensure that there is enough space, per designs, to have the icon, description and even
the title visible. We also make some CSS improvements to guarantee that the description is laid out on
two lines at most and that both text labels are trimmed elegantly with an ellipsis shold the width be
insufficient to display the whole text.
Since we would have needed to have more width/height setter overrides to trigger layout, we now make
LayoutNode trigger layout() directly and remove the need for subclasses to do this on a per-class basis.
We also make layout() a method that can be called safely anytime as it's now no longer part of the DOM
commit step, a new commit() method is used instead of that.
Tests: media/modern-media-controls/layout-node/node-made-dirty-during-commit.html
media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html
* Modules/modern-media-controls/controls/layout-node.js:
(LayoutNode.prototype.set width):
(LayoutNode.prototype.set height):
Trigger a call to layout() anytime "width" or "height" is set on any LayoutNode.
(LayoutNode.prototype.layout):
(LayoutNode.prototype.commit):
(performScheduledLayout):
Make layout() an empty method that subclasses can override easily outside of the DOM commit cycle,
its previous implementation is now called "commit()" which is a more accurate name.
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.get placard):
(MediaControls.prototype.get showsPlacard):
(MediaControls.prototype.showPlacard):
(MediaControls.prototype.hidePlacard):
(MediaControls.prototype.layout):
(MediaControls.prototype.get width): Deleted.
(MediaControls.prototype.set width): Deleted.
Add a "placard" property to make it simpler to reference the placard instead of making assumptions in
several places in that class on the children order. Anytime we run a layout or show the placard, ensure
that the placard metrics are synced with the media controls metrics.
* Modules/modern-media-controls/controls/placard.css:
(.placard .container):
(.placard .title,):
(.placard .description):
We now ensure that both the title and description are trimmed with an ellipsis when we run out of space
to display them fully.
* Modules/modern-media-controls/controls/placard.js:
(Placard.):
(Placard.prototype.layout):
We add new constraints to only show the icon, title and description if the placard is tall and wide enough.
* Modules/modern-media-controls/controls/slider.js:
(Slider.prototype.get width): Deleted.
(Slider.prototype.set width): Deleted.
Removed custom "width" getters and setters now we can just override layout() in case node metrics change.
* Modules/modern-media-controls/controls/time-control.js:
(TimeControl.prototype.set useSixDigitsForTimeLabels):
(TimeControl.prototype.layout):
(TimeControl.prototype.get width): Deleted.
(TimeControl.prototype.set width): Deleted.
(TimeControl.prototype._availableWidthHasChanged): Deleted.
Removed custom "width" getters and setters now we can just override layout() in case node metrics change.
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
Ensure we flush pending updates at construction time so that we match the size of the media controls right
at the first media layout.
LayoutTests:
We add a new test to check that the various designed constraints to toggle display of a placard's
icon, title and description are honored. Also, due to the old layout() method now being called
"commit()", we refactor a relevant test.
* media/modern-media-controls/layout-node/node-made-dirty-during-commit-expected.txt: Added.
* media/modern-media-controls/layout-node/node-made-dirty-during-commit.html: Added.
* media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics-expected.txt: Added.
* media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html: Added.
Modified Paths
Added Paths
Removed Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (214385 => 214386)
--- trunk/LayoutTests/ChangeLog 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/LayoutTests/ChangeLog 2017-03-24 23:32:14 UTC (rev 214386)
@@ -1,3 +1,20 @@
+2017-03-24 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Remove placard icon if height is compressed
+ https://bugs.webkit.org/show_bug.cgi?id=167935
+ <rdar://problem/30397128>
+
+ Reviewed by Dean Jackson.
+
+ We add a new test to check that the various designed constraints to toggle display of a placard's
+ icon, title and description are honored. Also, due to the old layout() method now being called
+ "commit()", we refactor a relevant test.
+
+ * media/modern-media-controls/layout-node/node-made-dirty-during-commit-expected.txt: Added.
+ * media/modern-media-controls/layout-node/node-made-dirty-during-commit.html: Added.
+ * media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics-expected.txt: Added.
+ * media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html: Added.
+
2017-03-24 Eric Carlson <[email protected]>
[MediaStream] "ideal" constraints passed to getUserMedia should affect fitness score
Copied: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit-expected.txt (from rev 214385, trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt) (0 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit-expected.txt 2017-03-24 23:32:14 UTC (rev 214386)
@@ -0,0 +1,11 @@
+Making a node dirty again during a commit.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS node.element.style.left is "20px"
+PASS node.element.style.left is "10px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Copied: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit.html (from rev 214385, trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html) (0 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-commit.html 2017-03-24 23:32:14 UTC (rev 214386)
@@ -0,0 +1,40 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+
+<script type="text/_javascript_">
+
+description("Making a node dirty again during a commit.");
+
+window.jsTestIsAsync = true;
+
+class CustomNode extends LayoutNode
+{
+
+ commit()
+ {
+ super.commit();
+
+ this.x = 10;
+ }
+
+}
+
+const node = new CustomNode;
+node.x = 20;
+
+let numberOfFrames = 0;
+scheduler.frameDidFire = function()
+{
+ numberOfFrames++;
+ if (numberOfFrames == 1)
+ shouldBeEqualToString("node.element.style.left", "20px");
+ else if (numberOfFrames == 2) {
+ shouldBeEqualToString("node.element.style.left", "10px");
+ finishMediaControlsTest();
+ }
+};
+
+</script>
+<script src=""
Deleted: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt (214385 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout-expected.txt 2017-03-24 23:32:14 UTC (rev 214386)
@@ -1,11 +0,0 @@
-Testing the LayoutNode.y property.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS node.element.style.left is "20px"
-PASS node.element.style.left is "10px"
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
Deleted: trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html (214385 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/LayoutTests/media/modern-media-controls/layout-node/node-made-dirty-during-layout.html 2017-03-24 23:32:14 UTC (rev 214386)
@@ -1,40 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-
-<script type="text/_javascript_">
-
-description("Testing the <code>LayoutNode.y</code> property.");
-
-window.jsTestIsAsync = true;
-
-class CustomNode extends LayoutNode
-{
-
- layout()
- {
- super.layout();
-
- this.x = 10;
- }
-
-}
-
-const node = new CustomNode;
-node.x = 20;
-
-let numberOfFrames = 0;
-scheduler.frameDidFire = function()
-{
- numberOfFrames++;
- if (numberOfFrames == 1)
- shouldBeEqualToString("node.element.style.left", "20px");
- else if (numberOfFrames == 2) {
- shouldBeEqualToString("node.element.style.left", "10px");
- finishMediaControlsTest();
- }
-};
-
-</script>
-<script src=""
Added: trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics-expected.txt (0 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics-expected.txt 2017-03-24 23:32:14 UTC (rev 214386)
@@ -0,0 +1,48 @@
+Testing placard metrics constraints.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+mediaControls.showPlacard(mediaControls.airplayPlacard)
+PASS placardContainer.children.length is 3
+PASS placardContainer.children[0] instanceof IconButton is true
+PASS placardContainer.children[1].element.className is "title"
+PASS placardContainer.children[2].element.className is "description"
+
+mediaControls.height = 169
+PASS placardContainer.children.length is 2
+PASS placardContainer.children[0].element.className is "title"
+PASS placardContainer.children[1].element.className is "description"
+
+mediaControls.height = 100
+PASS placardContainer.children.length is 2
+PASS placardContainer.children[0].element.className is "title"
+PASS placardContainer.children[1].element.className is "description"
+
+mediaControls.height = 99
+PASS placardContainer.children.length is 1
+PASS placardContainer.children[0].element.className is "title"
+
+mediaControls.height = 40
+PASS placardContainer.children.length is 1
+PASS placardContainer.children[0].element.className is "title"
+
+mediaControls.height = 39
+PASS placardContainer.children.length is 0
+
+mediaControls.width = 170
+mediaControls.height = 170
+PASS placardContainer.children.length is 3
+PASS placardContainer.children[0] instanceof IconButton is true
+PASS placardContainer.children[1].element.className is "title"
+PASS placardContainer.children[2].element.className is "description"
+
+mediaControls.width = 169
+PASS placardContainer.children.length is 2
+PASS placardContainer.children[0].element.className is "title"
+PASS placardContainer.children[1].element.className is "description"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html (0 => 214386)
--- trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html 2017-03-24 23:32:14 UTC (rev 214386)
@@ -0,0 +1,70 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing placard metrics constraints.");
+
+const mediaControls = new MediaControls({ layoutTraits: LayoutTraits.macOS, width: 400, height: 300 });
+
+mediaControls.showPlacard(mediaControls.airplayPlacard);
+const placardContainer = mediaControls.placard.children[0];
+debug("mediaControls.showPlacard(mediaControls.airplayPlacard)");
+shouldBe("placardContainer.children.length", "3");
+shouldBeTrue("placardContainer.children[0] instanceof IconButton");
+shouldBeEqualToString("placardContainer.children[1].element.className", "title");
+shouldBeEqualToString("placardContainer.children[2].element.className", "description");
+
+debug("");
+debug("mediaControls.height = 169");
+mediaControls.height = 169;
+shouldBe("placardContainer.children.length", "2");
+shouldBeEqualToString("placardContainer.children[0].element.className", "title");
+shouldBeEqualToString("placardContainer.children[1].element.className", "description");
+
+debug("");
+debug("mediaControls.height = 100");
+mediaControls.height = 100;
+shouldBe("placardContainer.children.length", "2");
+shouldBeEqualToString("placardContainer.children[0].element.className", "title");
+shouldBeEqualToString("placardContainer.children[1].element.className", "description");
+
+debug("");
+debug("mediaControls.height = 99");
+mediaControls.height = 99;
+shouldBe("placardContainer.children.length", "1");
+shouldBeEqualToString("placardContainer.children[0].element.className", "title");
+
+debug("");
+debug("mediaControls.height = 40");
+mediaControls.height = 40;
+shouldBe("placardContainer.children.length", "1");
+shouldBeEqualToString("placardContainer.children[0].element.className", "title");
+
+debug("");
+debug("mediaControls.height = 39");
+mediaControls.height = 39;
+shouldBe("placardContainer.children.length", "0");
+
+debug("");
+debug("mediaControls.width = 170");
+debug("mediaControls.height = 170");
+mediaControls.width = 170;
+mediaControls.height = 170;
+shouldBe("placardContainer.children.length", "3");
+shouldBeTrue("placardContainer.children[0] instanceof IconButton");
+shouldBeEqualToString("placardContainer.children[1].element.className", "title");
+shouldBeEqualToString("placardContainer.children[2].element.className", "description");
+
+debug("");
+debug("mediaControls.width = 169");
+mediaControls.width = 169;
+shouldBe("placardContainer.children.length", "2");
+shouldBeEqualToString("placardContainer.children[0].element.className", "title");
+shouldBeEqualToString("placardContainer.children[1].element.className", "description");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (214385 => 214386)
--- trunk/Source/WebCore/ChangeLog 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/ChangeLog 2017-03-24 23:32:14 UTC (rev 214386)
@@ -1,3 +1,79 @@
+2017-03-24 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Remove placard icon if height is compressed
+ https://bugs.webkit.org/show_bug.cgi?id=167935
+ <rdar://problem/30397128>
+
+ Reviewed by Dean Jackson.
+
+ We make the addition of certain Placard children conditional on the placard's metrics. Whenever the
+ media controls metrics changes, the placard, if any, is set to have the same metrics and layout() is
+ called where we ensure that there is enough space, per designs, to have the icon, description and even
+ the title visible. We also make some CSS improvements to guarantee that the description is laid out on
+ two lines at most and that both text labels are trimmed elegantly with an ellipsis shold the width be
+ insufficient to display the whole text.
+
+ Since we would have needed to have more width/height setter overrides to trigger layout, we now make
+ LayoutNode trigger layout() directly and remove the need for subclasses to do this on a per-class basis.
+ We also make layout() a method that can be called safely anytime as it's now no longer part of the DOM
+ commit step, a new commit() method is used instead of that.
+
+ Tests: media/modern-media-controls/layout-node/node-made-dirty-during-commit.html
+ media/modern-media-controls/media-controls/media-controls-placard-compressed-metrics.html
+
+ * Modules/modern-media-controls/controls/layout-node.js:
+ (LayoutNode.prototype.set width):
+ (LayoutNode.prototype.set height):
+ Trigger a call to layout() anytime "width" or "height" is set on any LayoutNode.
+
+ (LayoutNode.prototype.layout):
+ (LayoutNode.prototype.commit):
+ (performScheduledLayout):
+ Make layout() an empty method that subclasses can override easily outside of the DOM commit cycle,
+ its previous implementation is now called "commit()" which is a more accurate name.
+
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.prototype.get placard):
+ (MediaControls.prototype.get showsPlacard):
+ (MediaControls.prototype.showPlacard):
+ (MediaControls.prototype.hidePlacard):
+ (MediaControls.prototype.layout):
+ (MediaControls.prototype.get width): Deleted.
+ (MediaControls.prototype.set width): Deleted.
+ Add a "placard" property to make it simpler to reference the placard instead of making assumptions in
+ several places in that class on the children order. Anytime we run a layout or show the placard, ensure
+ that the placard metrics are synced with the media controls metrics.
+
+ * Modules/modern-media-controls/controls/placard.css:
+ (.placard .container):
+ (.placard .title,):
+ (.placard .description):
+ We now ensure that both the title and description are trimmed with an ellipsis when we run out of space
+ to display them fully.
+
+ * Modules/modern-media-controls/controls/placard.js:
+ (Placard.):
+ (Placard.prototype.layout):
+ We add new constraints to only show the icon, title and description if the placard is tall and wide enough.
+
+ * Modules/modern-media-controls/controls/slider.js:
+ (Slider.prototype.get width): Deleted.
+ (Slider.prototype.set width): Deleted.
+ Removed custom "width" getters and setters now we can just override layout() in case node metrics change.
+
+ * Modules/modern-media-controls/controls/time-control.js:
+ (TimeControl.prototype.set useSixDigitsForTimeLabels):
+ (TimeControl.prototype.layout):
+ (TimeControl.prototype.get width): Deleted.
+ (TimeControl.prototype.set width): Deleted.
+ (TimeControl.prototype._availableWidthHasChanged): Deleted.
+ Removed custom "width" getters and setters now we can just override layout() in case node metrics change.
+
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController):
+ Ensure we flush pending updates at construction time so that we match the size of the media controls right
+ at the first media layout.
+
2017-03-24 Eric Carlson <[email protected]>
[MediaStream] "ideal" constraints passed to getUserMedia should affect fitness score
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -30,6 +30,8 @@
this._pendingDOMManipulation = LayoutNode.DOMManipulation.None;
}
+ // Public
+
get x()
{
return this._x;
@@ -70,6 +72,7 @@
this._width = width;
this.markDirtyProperty("width");
+ this.layout();
}
get height()
@@ -84,6 +87,7 @@
this._height = height;
this.markDirtyProperty("height");
+ this.layout();
}
get visible()
@@ -213,6 +217,30 @@
this._updateDirtyState();
}
+ // Protected
+
+ layout()
+ {
+ // Implemented by subclasses.
+ }
+
+ commit()
+ {
+ if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Removal) {
+ const parent = this.element.parentNode;
+ if (parent)
+ parent.removeChild(this.element);
+ }
+
+ for (let propertyName of this._dirtyProperties)
+ this.commitProperty(propertyName);
+
+ this._dirtyProperties.clear();
+
+ if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Addition)
+ nodesRequiringChildrenUpdate.add(this.parent);
+ }
+
commitProperty(propertyName)
{
const style = this.element.style;
@@ -236,23 +264,6 @@
}
}
- layout()
- {
- if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Removal) {
- const parent = this.element.parentNode;
- if (parent)
- parent.removeChild(this.element);
- }
-
- for (let propertyName of this._dirtyProperties)
- this.commitProperty(propertyName);
-
- this._dirtyProperties.clear();
-
- if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Addition)
- nodesRequiringChildrenUpdate.add(this.parent);
- }
-
// Private
_markNodeManipulation(manipulation)
@@ -305,6 +316,7 @@
previousDirtyNodes.forEach(node => {
node._needsLayout = false;
node.layout();
+ node.commit();
});
nodesRequiringChildrenUpdate.forEach(node => node._updateChildren());
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -59,20 +59,6 @@
// Public
- get width()
- {
- return super.width;
- }
-
- set width(width)
- {
- if (width === this.width)
- return;
-
- super.width = width;
- this.layout();
- }
-
get layoutTraits()
{
return this._layoutTraits;
@@ -139,9 +125,14 @@
this.markDirtyProperty("scaleFactor");
}
+ get placard()
+ {
+ return this.children[0] instanceof Placard ? this.children[0] : null;
+ }
+
get showsPlacard()
{
- return this.children[0] instanceof Placard;
+ return !!this.placard;
}
showPlacard(placard)
@@ -151,12 +142,13 @@
children.push(this.controlsBar);
this.children = children;
+ this.layout();
}
hidePlacard()
{
if (this.showsPlacard)
- this.children[0].remove();
+ this.placard.remove();
this._invalidateChildren();
}
@@ -196,6 +188,16 @@
// Implemented by subclasses as needed.
}
+ layout()
+ {
+ super.layout();
+
+ if (this.showsPlacard) {
+ this.placard.width = this.width;
+ this.placard.height = this.height;
+ }
+ }
+
// Private
_invalidateChildren()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.css 2017-03-24 23:32:14 UTC (rev 214386)
@@ -39,6 +39,7 @@
left: 50%;
top: 50%;
max-width: 402px;
+ width: 100%;
transform: translate(-50%, -50%);
}
@@ -58,7 +59,10 @@
.placard .title,
.placard .description {
+ padding: 0 10px;
text-align: center;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.placard .title {
@@ -67,4 +71,8 @@
.placard .description {
font-size: 13px;
+ white-space: initial;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/placard.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -23,10 +23,15 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
+const MinWidthToDisplayIcon = 170;
+const MinHeightToDisplayIcon = 170;
+const MinHeightToDisplayDescription = 100;
+const MinHeightToDisplayTitle = 40;
+
class Placard extends LayoutItem
{
- constructor({ iconName = null, title = "", description = "", layoutDelegate = null } = {})
+ constructor({ iconName = null, title = "", description = "", width = 400, height = 300, layoutDelegate = null } = {})
{
super({
element: `<div class="placard"></div>`,
@@ -33,16 +38,41 @@
layoutDelegate
});
- const container = this.addChild(new LayoutNode(`<div class="container"></div>`));
+ this._container = this.addChild(new LayoutNode(`<div class="container"></div>`));
- if (iconName)
- container.addChild(new IconButton(this)).iconName = iconName;
+ if (iconName) {
+ this._iconButton = new IconButton(this);
+ this._iconButton.iconName = iconName;
+ }
if (!!title)
- container.addChild(new LayoutNode(`<div class="title">${title}</div>`));
+ this._titleNode = new LayoutNode(`<div class="title">${title}</div>`);
if (!!description)
- container.addChild(new LayoutNode(`<div class="description">${description}</div>`));
+ this._descriptionNode = new LayoutNode(`<div class="description">${description}</div>`);
+
+ this.width = width;
+ this.height = height;
}
+ // Protected
+
+ layout()
+ {
+ super.layout();
+
+ const children = [];
+
+ if (this._iconButton && this.width >= MinWidthToDisplayIcon && this.height >= MinHeightToDisplayIcon)
+ children.push(this._iconButton);
+
+ if (this._titleNode && this.height >= MinHeightToDisplayTitle)
+ children.push(this._titleNode);
+
+ if (this._descriptionNode && this.height >= MinHeightToDisplayDescription)
+ children.push(this._descriptionNode);
+
+ this._container.children = children;
+ }
+
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -64,17 +64,6 @@
this.needsLayout = true;
}
- get width()
- {
- return super.width;
- }
-
- set width(width)
- {
- super.width = width;
- this.needsLayout = true;
- }
-
// Protected
handleEvent(event)
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -63,20 +63,9 @@
return;
this._useSixDigitsForTimeLabels = flag;
- this._availableWidthHasChanged();
+ this.layout();
}
- get width()
- {
- return super.width;
- }
-
- set width(width)
- {
- super.width = width;
- this._availableWidthHasChanged();
- }
-
get isSufficientlyWide()
{
return this.scrubber.width >= ((this.layoutTraits & LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
@@ -84,8 +73,10 @@
// Protected
- _availableWidthHasChanged()
+ layout()
{
+ super.layout();
+
const extraWidth = this._useSixDigitsForTimeLabels ? AdditionalTimeLabelWidthOverAnHour : 0;
const elapsedTimeLabelWidth = ElapsedTimeLabelWidth + extraWidth;
const remainingTimeLabelWidth = RemainingTimeLabelWidth + extraWidth;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (214385 => 214386)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-24 23:27:14 UTC (rev 214385)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-24 23:32:14 UTC (rev 214386)
@@ -44,6 +44,7 @@
}
this._updateControlsIfNeeded();
+ scheduler.flushScheduledLayoutCallbacks();
shadowRoot.addEventListener("resize", this);
