Changeset 279547 in webkit


Ignore:
Timestamp:
Jul 3, 2021, 2:29:20 PM (4 years ago)
Author:
dino@apple.com
Message:

Move BottomControlsBarHeight and InsideMargin to be computed at runtime
​https://bugs.webkit.org/show_bug.cgi?id=227505
<rdar://problem/79932256>

Reviewed by Devin Rousso.

Rather than having two JS constants that have to be kept in sync
with CSS, simply retrieve the value from the computed style.

No change in behaviour.

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

(InlineMediaControls.prototype.layout):

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

(:host(audio), :host(video.media-document.audio), *):

  • Modules/modern-media-controls/controls/layout-node.js: Add two helpers to

retrieve computed style values.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-controls-bar-styles.html

    r227979 r279547  
    2121
    2222let style, bounds;
     23let frameCount = 0;
    2324scheduler.frameDidFire = function()
    2425{
    25     document.body.appendChild(mediaControls.element);
     26    if (frameCount == 0)
     27        document.body.appendChild(mediaControls.element);
     28    else if (frameCount == 3) {
     29        style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
     30        bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
    2631
    27     style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
    28     bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
    29    
    30     shouldBeEqualToString("style.left", "6px");
    31     shouldBeEqualToString("style.bottom", "6px");
    32     shouldBeEqualToString("style.width", "668px");
    33     shouldBeEqualToString("style.height", "31px");
     32        shouldBeEqualToString("style.left", "6px");
     33        shouldBeEqualToString("style.bottom", "6px");
     34        shouldBeEqualToString("style.width", "668px");
     35        shouldBeEqualToString("style.height", "31px");
    3436
    35     shouldBe("bounds.left", "6");
    36     shouldBe("bounds.top", "263");
    37     shouldBe("bounds.width", "668");
    38     shouldBe("bounds.height", "31");
     37        shouldBe("bounds.left", "6");
     38        shouldBe("bounds.top", "263");
     39        shouldBe("bounds.width", "668");
     40        shouldBe("bounds.height", "31");
    3941
    40     mediaControls.element.remove();
     42        mediaControls.element.remove();
    4143
    42     debug("");
    43     finishMediaControlsTest();
     44        debug("");
     45        finishMediaControlsTest();
     46    }
     47
     48    mediaControls.needsLayout = true;
     49    frameCount++;
    4450};
    4551

  • trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html

    r275456 r279547  
    3333
    3434shouldBecomeEqual("ready()", "true", () => {
     35    document.body.appendChild(mediaControls.element);
    3536    debug("");
    3637    while (droppableControls.length) {
    … …  
    4445        mediaControls.width--;
    4546    }
     47    mediaControls.element.remove();
    4648    debug("");
    4749    finishJSTest();

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html

    r227953 r279547  
    1010    left: 0;
    1111}
    12    
    1312</style>
    1413<script type="text/javascript">
    … …  
    2120
    2221let style, bounds;
     22let frameCount = 0;
    2323scheduler.frameDidFire = function()
    2424{
    25     document.body.appendChild(mediaControls.element);
     25    if (frameCount == 0)
     26        document.body.appendChild(mediaControls.element);
     27    else if (frameCount == 3) {
     28        style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
     29        bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
    2630
    27     style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
    28     bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
    29    
    30     shouldBeEqualToString("style.left", "6px");
    31     shouldBeEqualToString("style.bottom", "6px");
    32     shouldBeEqualToString("style.width", "668px");
    33     shouldBeEqualToString("style.height", "31px");
     31        shouldBeEqualToString("style.left", "6px");
     32        shouldBeEqualToString("style.bottom", "6px");
     33        shouldBeEqualToString("style.width", "668px");
     34        shouldBeEqualToString("style.height", "31px");
    3435
    35     shouldBe("bounds.left", "6");
    36     shouldBe("bounds.top", "263");
    37     shouldBe("bounds.width", "668");
    38     shouldBe("bounds.height", "31");
     36        shouldBe("bounds.left", "6");
     37        shouldBe("bounds.top", "263");
     38        shouldBe("bounds.width", "668");
     39        shouldBe("bounds.height", "31");
    3940
    40     mediaControls.element.remove();
     41        mediaControls.element.remove();
    4142
    42     debug("");
    43     finishMediaControlsTest();
     43        debug("");
     44        finishMediaControlsTest();
     45    }
     46
     47    mediaControls.needsLayout = true;
     48    frameCount++;
    4449};
    4550

  • trunk/Source/WebCore/ChangeLog

    r279546 r279547  
     12021-07-01  Dean Jackson  <dino@apple.com>
     2
     3        Move BottomControlsBarHeight and InsideMargin to be computed at runtime
     4        https://bugs.webkit.org/show_bug.cgi?id=227505
     5        <rdar://problem/79932256>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Rather than having two JS constants that have to be kept in sync
     10        with CSS, simply retrieve the value from the computed style.
     11
     12        No change in behaviour.
     13
     14        * Modules/modern-media-controls/controls/inline-media-controls.js:
     15        (InlineMediaControls.prototype.layout):
     16        * Modules/modern-media-controls/controls/media-controls.css:
     17        (:host(audio), :host(video.media-document.audio), *):
     18        * Modules/modern-media-controls/controls/layout-node.js: Add two helpers to
     19        retrive computed style values.
     20
    1212021-07-03  Alexey Shvayka  <shvaikalesh@gmail.com>
    222

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

    r279489 r279547  
    2424 */
    2525
    26 const InsideMargin = 6; // Minimum margin to guarantee around all controls, this constant needs to stay in sync with the --inline-controls-inside-margin CSS variable.
    27 const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.
    28 
    2926class InlineMediaControls extends MediaControls
    3027{
    … …  
    134131
    135132        // Compute the visible size for the controls bar.
    136         this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * InsideMargin);
     133        if (!this._inlineInsideMargin)
     134            this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
     135        this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * this._inlineInsideMargin);
    137136
    138137        // Compute the absolute minimum width to display the center control (status label or time control).
    … …  
    219218        // Ensure we position the bottom controls bar at the bottom of the frame, accounting for
    220219        // the inside margin, unless this would yield a position outside of the frame.
    221         this.bottomControlsBar.y = Math.max(0, this.height - BottomControlsBarHeight - InsideMargin);
     220        if (!this._inlineBottomControlsBarHeight)
     221            this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
     222        this.bottomControlsBar.y = Math.max(0, this.height - this._inlineBottomControlsBarHeight - this._inlineInsideMargin);
    222223
    223224        this.bottomControlsBar.children = controlsBarChildren;

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

    r279489 r279547  
    230230    }
    231231
     232    computedValueForStyleProperty(propertyName)
     233    {
     234        return window.getComputedStyle(this.element).getPropertyValue(propertyName);
     235    }
     236
     237    computedValueForStylePropertyInPx(propertyName)
     238    {
     239        const value = this.computedValueForStyleProperty(propertyName);
     240        if (!value)
     241            return 0;
     242        if (!value.endsWith("px"))
     243            return 0;
     244        return parseFloat(value);
     245    }
     246
    232247    // Protected
    233248

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

    r279489 r279547  
    6060            return;
    6161
     62        if (!this._inlineInsideMargin)
     63            this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
     64        if (!this._inlineBottomControlsBarHeight)
     65            this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
     66
    6267        this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
    63         this._volumeSliderContainer.y = this.bottomControlsBar.y - BottomControlsBarHeight - InsideMargin;
     68        this._volumeSliderContainer.y = this.bottomControlsBar.y - this._inlineBottomControlsBarHeight - this._inlineInsideMargin;
    6469    }
    6570

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css

    r279489 r279547  
    3838
    3939* {
    40     /* This constant needs to stay in sync with the InsideMargin JS constant. */
    4140    --inline-controls-inside-margin: 6px;
    4241    --fullscreen-controls-bar-height: 75px;
    … …  
    4645
    4746:host(audio), :host(video.media-document.audio), * {
    48     /* This constant needs to stay in sync with the BottomControlsBarHeight JS constant. */
    4947    --inline-controls-bar-height: 31px;
    5048}
Note: See TracChangeset for help on using the changeset viewer.