Changeset 213115 in webkit


Ignore:
Timestamp:
Feb 27, 2017 7:24:37 PM (7 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Use compact mode by default on macOS
https://bugs.webkit.org/show_bug.cgi?id=168958
<rdar://problem/30748638>

Reviewed by Jon Lee.

Source/WebCore:

We now use the compact layout mode by default on macOS.

  • Modules/modern-media-controls/controls/layout-item.js: Remove the ReducedPadding trait.
  • Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:

(.media-controls.mac.inline.compact .time-label,): Vertically align the time label with
the scrubber in compact mode.
(.media-controls.mac.inline.compact .scrubber.slider): Correctly position the scrubber in
compact mode so that it's vertically aligned.

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

(MacOSInlineMediaControls.prototype.layoutTraitsDidChange): Remove handling of tight and
reduced padding traits since these do not apply to macOS anymore. We also notify the
scrubber of a layout trait change so that it may adjust its height.

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

(Scrubber):
(Scrubber.prototype.layoutTraitsDidChange): Adjust the height of the scrubber to match
compact layout traits.

  • Modules/modern-media-controls/controls/time-control.js:

(TimeControl.prototype.get isSufficientlyWide): Adjust the minimum scrubber width for
TimeControl visibility to match compact layout traits.

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

(MediaController.prototype.get layoutTraits): Use the compact layout trait by default
on macOS and make the tight padding specific to iOS.

LayoutTests:

Rebaseline tests to account for compact mode being the default mode for macOS
and remove tests that would check dynamically applying compact mode at some
threshold and the reduced padding mode.

  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt:
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html:
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Removed.
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Removed.
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Removed.
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Removed.
  • media/modern-media-controls/media-controller/media-controller-compact.html:
  • media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt:
  • media/modern-media-controls/media-controller/media-controller-fullscreen-change.html:
  • media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Removed.
  • media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Removed.
  • media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Removed.
  • media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Removed.
  • platform/mac/TestExpectations:
Location:
trunk
Files:
8 deleted
15 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r213113 r213115  
     12017-02-27  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Use compact mode by default on macOS
     4        https://bugs.webkit.org/show_bug.cgi?id=168958
     5        <rdar://problem/30748638>
     6
     7        Reviewed by Jon Lee.
     8
     9        Rebaseline tests to account for compact mode being the default mode for macOS
     10        and remove tests that would check dynamically applying compact mode at some
     11        threshold and the reduced padding mode.
     12
     13        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt:
     14        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html:
     15        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Removed.
     16        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Removed.
     17        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Removed.
     18        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Removed.
     19        * media/modern-media-controls/media-controller/media-controller-compact.html:
     20        * media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt:
     21        * media/modern-media-controls/media-controller/media-controller-fullscreen-change.html:
     22        * media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Removed.
     23        * media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Removed.
     24        * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode-expected.txt: Removed.
     25        * media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html: Removed.
     26        * platform/mac/TestExpectations:
     27
    1282017-02-27  Antoine Quint  <graouts@apple.com>
    229
  • trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html

    r213113 r213115  
    77description("Testing <code>IOSInlineMediaControls</code> with tight padding.");
    88
    9 const mediaControls = new MacOSInlineMediaControls({ width: 400 });
     9const mediaControls = new IOSInlineMediaControls({ width: 400 });
    1010mediaControls.layoutTraits = LayoutTraits.iOS | LayoutTraits.TightPadding;
    1111
  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt

    r211904 r213115  
    55
    66PASS mediaControls.element.classList.contains('compact') is true
    7 PASS mediaControls.rightContainer.buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
    87PASS mediaControls.leftContainer.leftMargin is 8
    98PASS mediaControls.leftContainer.rightMargin is 12
  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html

    r211904 r213115  
    1111
    1212shouldBeTrue("mediaControls.element.classList.contains('compact')");
    13 shouldBe("mediaControls.rightContainer.buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
    1413shouldBe("mediaControls.leftContainer.leftMargin", "8");
    1514shouldBe("mediaControls.leftContainer.rightMargin", "12");
  • trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html

    r212943 r213115  
    77        left: 0;
    88        top: 0;
    9         width: 240px;
    10         height: 180px;
     9        width: 800px;
     10        height: 600px;
    1111    }
    1212   
  • trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change-expected.txt

    r208537 r213115  
    99
    1010Media exited fullscreen
    11 PASS mediaController.layoutTraits is LayoutTraits.macOS
     11PASS mediaController.layoutTraits is LayoutTraits.macOS | LayoutTraits.Compact
    1212PASS mediaController.controls instanceof MacOSInlineMediaControls is true
    1313
  • trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-change.html

    r208537 r213115  
    4747    } else {
    4848        debug("Media exited fullscreen");
    49         shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS");
     49        shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Compact");
    5050        shouldBeTrue("mediaController.controls instanceof MacOSInlineMediaControls");
    5151
  • trunk/LayoutTests/platform/mac/TestExpectations

    r213109 r213115  
    14781478media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
    14791479media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
     1480media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
    14801481
    14811482# This one always times out on the bots, cannot reproduce locally.
  • trunk/Source/WebCore/ChangeLog

    r213113 r213115  
     12017-02-27  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Use compact mode by default on macOS
     4        https://bugs.webkit.org/show_bug.cgi?id=168958
     5        <rdar://problem/30748638>
     6
     7        Reviewed by Jon Lee.
     8
     9        We now use the compact layout mode by default on macOS.
     10
     11        * Modules/modern-media-controls/controls/layout-item.js: Remove the ReducedPadding trait.
     12        * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
     13        (.media-controls.mac.inline.compact .time-label,): Vertically align the time label with
     14        the scrubber in compact mode.
     15        (.media-controls.mac.inline.compact .scrubber.slider): Correctly position the scrubber in
     16        compact mode so that it's vertically aligned.
     17        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
     18        (MacOSInlineMediaControls.prototype.layoutTraitsDidChange): Remove handling of tight and
     19        reduced padding traits since these do not apply to macOS anymore. We also notify the
     20        scrubber of a layout trait change so that it may adjust its height.
     21        * Modules/modern-media-controls/controls/scrubber.js:
     22        (Scrubber):
     23        (Scrubber.prototype.layoutTraitsDidChange): Adjust the height of the scrubber to match
     24        compact layout traits.
     25        * Modules/modern-media-controls/controls/time-control.js:
     26        (TimeControl.prototype.get isSufficientlyWide): Adjust the minimum scrubber width for
     27        TimeControl visibility to match compact layout traits.
     28        * Modules/modern-media-controls/media/media-controller.js:
     29        (MediaController.prototype.get layoutTraits): Use the compact layout trait by default
     30        on macOS and make the tight padding specific to iOS.
     31
    1322017-02-27  Antoine Quint  <graouts@apple.com>
    233
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js

    r211904 r213115  
    3030    Fullscreen     : 1 << 2,
    3131    Compact        : 1 << 3,
    32     ReducedPadding : 1 << 4,
    33     TightPadding   : 1 << 5
     32    TightPadding   : 1 << 4
    3433};
    3534
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css

    r212280 r213115  
    4040}
    4141
    42 .media-controls.mac.inline.compact .scrubber.slider {
    43     top: 12px;
    44 }
    45 
    4642.media-controls.mac.inline.compact button.mute {
    4743    -webkit-mask-position-y: 6px;
     
    5652.media-controls.mac.inline.compact .time-label,
    5753.media-controls.mac.inline.compact .status-label {
     54    top: 4px;
     55    font-size: 12px;
     56}
     57
     58/* Scrubber */
     59
     60.media-controls.mac.inline.compact .scrubber.slider {
    5861    top: 5px;
    59     font-size: 12px;
    6062}
    6163
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js

    r213113 r213115  
    4141
    4242        this.rightContainer = new ButtonsContainer({
     43            buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
    4344            cssClassName: "right"
    4445        });
     
    116117            this.rightContainer.rightMargin = 8;
    117118            this.rightContainer.buttonMargin = 12;
    118         } else if (layoutTraits & LayoutTraits.TightPadding) {
    119             this.leftContainer.leftMargin = 12;
    120             this.leftContainer.rightMargin = 12;
    121             this.leftContainer.buttonMargin = 12;
    122             this.rightContainer.leftMargin = 12;
    123             this.rightContainer.rightMargin = 12;
    124             this.rightContainer.buttonMargin = 12;
    125         } else if (layoutTraits & LayoutTraits.ReducedPadding) {
    126             this.leftContainer.leftMargin = 12;
    127             this.leftContainer.rightMargin = 16;
    128             this.leftContainer.buttonMargin = 16;
    129             this.rightContainer.leftMargin = 0;
    130             this.rightContainer.rightMargin = 12;
    131             this.rightContainer.buttonMargin = 16;
    132119        } else {
    133120            this.leftContainer.leftMargin = 24;
     
    139126        }
    140127
    141         if (layoutTraits & LayoutTraits.Compact)
    142             this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
    143         else
    144             this.rightContainer.buttons = [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
    145 
    146128        this.leftContainer.buttons.forEach(button => button.layoutTraitsDidChange());
    147129        this.rightContainer.buttons.forEach(button => button.layoutTraitsDidChange());
     130        this.timeControl.scrubber.layoutTraitsDidChange();
    148131
    149132        this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js

    r212280 r213115  
    3434        });
    3535
    36          this.height = 23;
     36        this.layoutTraitsDidChange();
    3737
    3838        // Add the element used to draw the track on iOS.
     
    5757        this._buffered = buffered;
    5858        this.needsLayout = true;
     59    }
     60
     61    layoutTraitsDidChange()
     62    {
     63        this.height = (this.layoutTraits & LayoutTraits.Compact) ? 15 : 23;
    5964    }
    6065
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js

    r212280 r213115  
    2424 */
    2525
    26 const MinimumScrubberWidth = 168;
     26const MinimumScrubberWidthDefault = 168;
     27const MinimumScrubberWidthCompact = 124;
    2728const ElapsedTimeLabelLeftMargin = -2;
    2829const ElapsedTimeLabelWidth = 40;
     
    8889    get isSufficientlyWide()
    8990    {
    90         return this.scrubber.width >= MinimumScrubberWidth;
     91        return this.scrubber.width >= ((this.layoutTraits & LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
    9192    }
    9293
  • trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js

    r212980 r213115  
    2424 */
    2525
    26 const CompactModeMaxWidth = 241;
    27 const ReducedPaddingMaxWidth = 300;
    2826const AudioTightPaddingMaxWidth = 400;
    2927
     
    7573            return traits | LayoutTraits.Fullscreen;
    7674
    77         const controlsWidth = this._controlsWidth();
    78         if (controlsWidth <= CompactModeMaxWidth)
     75        if (traits & LayoutTraits.macOS)
    7976            return traits | LayoutTraits.Compact;
    8077
    81         const isAudio = this.isAudio;
    82         if (isAudio && controlsWidth <= AudioTightPaddingMaxWidth)
     78        if (this.isAudio && this._controlsWidth() <= AudioTightPaddingMaxWidth)
    8379            return traits | LayoutTraits.TightPadding;
    84 
    85         if (!isAudio && controlsWidth <= ReducedPaddingMaxWidth)
    86             return traits | LayoutTraits.ReducedPadding;
    8780
    8881        return traits;
Note: See TracChangeset for help on using the changeset viewer.