Changeset 279481 in webkit

Timestamp:

Jul 1, 2021, 1:28:32 PM (5 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

retrive computed style values.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/modern-media-controls/controls/inline-media-controls.js (modified) (3 diffs)
• Modules/modern-media-controls/controls/layout-node.js (modified) (1 diff)
• Modules/modern-media-controls/controls/macos-inline-media-controls.js (modified) (1 diff)
• Modules/modern-media-controls/controls/media-controls.css (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-07-01  Dean Jackson  <dino@apple.com>
+
+        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
+        retrive computed style values.
+
 2021-07-01  Brady Eidson  <beidson@apple.com>
 

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

@@ -24 +24 @@
  */
 
-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.
-const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.
-
 class InlineMediaControls extends MediaControls
 {
@@ -134 +131 @@
 
         // Compute the visible size for the controls bar.
-        this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * InsideMargin);
+        if (!this._inlineInsideMargin)
+            this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
+        this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * this._inlineInsideMargin);
 
         // Compute the absolute minimum width to display the center control (status label or time control).
@@ -219 +218 @@
         // Ensure we position the bottom controls bar at the bottom of the frame, accounting for
         // the inside margin, unless this would yield a position outside of the frame.
-        this.bottomControlsBar.y = Math.max(0, this.height - BottomControlsBarHeight - InsideMargin);
+        if (!this._inlineBottomControlsBarHeight)
+            this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
+        this.bottomControlsBar.y = Math.max(0, this.height - this._inlineBottomControlsBarHeight - this._inlineInsideMargin);
 
         this.bottomControlsBar.children = controlsBarChildren;

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

@@ -230 +230 @@
     }
 
+    computedValueForStyleProperty(propertyName)
+    {
+        return window.getComputedStyle(this.element).getPropertyValue(propertyName);
+    }
+
+    computedValueForStylePropertyInPx(propertyName)
+    {
+        const value = this.computedValueForStyleProperty(propertyName);
+        if (!value)
+            return 0;
+        if (!value.endsWith("px"))
+            return 0;
+        return parseFloat(value);
+    }
+
     // Protected
 

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

@@ -60 +60 @@
             return;
 
+        if (!this._inlineInsideMargin)
+            this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
+        if (!this._inlineBottomControlsBarHeight)
+            this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
+
         this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
-        this._volumeSliderContainer.y = this.bottomControlsBar.y - BottomControlsBarHeight - InsideMargin;
+        this._volumeSliderContainer.y = this.bottomControlsBar.y - this._inlineBottomControlsBarHeight - this._inlineInsideMargin;
     }
 

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

@@ -38 +38 @@
 
 * {
-    /* This constant needs to stay in sync with the InsideMargin JS constant. */
     --inline-controls-inside-margin: 6px;
     --fullscreen-controls-bar-height: 75px;
@@ -46 +45 @@
 
 :host(audio), :host(video.media-document.audio), * {
-    /* This constant needs to stay in sync with the BottomControlsBarHeight JS constant. */
     --inline-controls-bar-height: 31px;
 }