Open Bug 1527268 Opened 8 months ago Updated Last month

Clicking the “Volume” button highlights the “Continue watching while you use Facebook” button

Categories

(Web Compatibility :: Desktop, defect, P3)

Desktop
All
defect

Tracking

(firefox-esr60 affected, firefox65 affected, firefox66 affected, firefox67 affected, firefox71 affected)

Tracking Status
firefox-esr60 --- affected
firefox65 --- affected
firefox66 --- affected
firefox67 --- affected
firefox71 --- affected

People

(Reporter: Anca, Unassigned)

References

()

Details

(Keywords: webcompat:site-wait, Whiteboard: [sitewait])

Attachments

(2 files)

Attached video screencast issue.mov

[Affected versions]:

  • 67.0a1 (2019-02-11)
  • 66.0b7
  • 65.0.1
  • 60.5.1esr

[Affected platforms]:

  • macOS 10.13
  • macOS 10.14

[Steps to reproduce]:

  1. Launch Firefox
  2. Log in to https://www.facebook.com/
  3. Play any video
  4. Press the "Volume" button

[Expected result]:

  • Only the Volume bar is activated.

[Actual result]:

  • Both “Volume” and “Continue watching while you use Facebook” buttons are activated.

[Regression range]:

  • Reproducible also on RC 63.0; I will come back with additional information.

[Additional Notes]:

  • Glitches are triggered when the volume bar is dragged to around 25% (see the attached screencast).
  • Issue is reproducible only when the video is running.
  • When in enlarge mode couldn't see this problem.
  • Note that on one profile the “Click to enlarge” button was unusable for a while; Not sure yet what was the cause for this, but after refreshing the page I could no longer reproduce it.

Not a regression, I could see this issue way back to Fx 54.0a1. On older builds, the Facebook videos are displayed directly in enlarge mode when hit the Play button or builds are not available.

Has Regression Range: --- → no

I'm not sure if this is video element related.

Component: Event Handling → Audio/Video: Playback

Probably not, it's probably a web-compat issue.

Component: Audio/Video: Playback → Desktop
Product: Core → Web Compatibility

This seems relatively minor, but can you take a look Karl?

https://www.facebook.com/Musicians/ has lots of videos -- logging in seems to be required to get the "Continue watching while you use Facebook" button. I have test account details if you don't have one.

Flags: needinfo?(kdubost)
Priority: -- → P3

The login for watching video is probably Bug 1322001

But let's see this issue.
Using Firefox Nightly 67.0a1 (2019-02-24) (64-bit) on macOS 10.14.3 (18D109)
fresh profile.

Logged in.

Went to https://www.facebook.com/pg/Musicians/videos/?ref=page_internal

Aaaah it took me a while to understand what was meant by buttons are activated. It's not that they are activated, it's that the background-color is changed.

<span
  ><button
    data-tooltip-content="Continue watching while you use Facebook"
    data-hover="tooltip"
    data-tooltip-position="above"
    class="_zbd _42ft"
    data-testid="wns_control"
    type="button"
    id="js_y"
  >
    <i alt="" class="_rwt img sp_iNdbHByoEEp_2x sx_0a945a"></i
    ><span class="accessible_elem">Enter Watch And Scroll</span>
  </button></span
>
.sp_iNdbHByoEEp_2x {
	background-image: url(/rsrc.php/v3/yR/r/FQZCF3SCWEr.png);
	background-size: 21px 114px;
	background-repeat: no-repeat;
	display: inline-block;
	height: 20px;
	width: 20px;
}

The image is a series of icons
https://static.xx.fbcdn.net/rsrc.php/v3/yR/r/FQZCF3SCWEr.png
which is positioned depending on the state.

when I adjust the volume something is also adjusting

    <i alt="" class="_rwt img sp_iNdbHByoEEp_2x sx_0a945a"></i
    >

So I wonder if the rewriting of this part takes time and occasionally displays the wrong state, but probably drag and drop of the volume button should not be updating this other component.

https://static.xx.fbcdn.net/rsrc.php/v3iL3Z4/yJ/l/en_US/xzUCea7OVJn.js

  a.prototype.onButtonClick = function () {
    this.props.showWNSNUX && this.$1(),
    this.props.onEnterWatchAndScroll && this.props.onEnterWatchAndScroll()
  };
  a.prototype.getIconSrc = function () {
    var a = b('VideoPlayerExperiments').rhcWNSEnabled,
    c = b('Locale').isRTL();
    if (a && !c || !a && c) {
      a = b('VideoPlayerExperiments').pipEntryIcon;
      if (a) return a;
      return this.props.isSlidingWNSEligible ? g('463043')  : g('426217')
    }
    return this.props.isSlidingWNSEligible ? g('463039')  : g('463040')
  };
  a.prototype.render = function () {
    var a = b('React').createElement(b('Image.react'), {
      className: '_rwt',
      src: this.getIconSrc()
    }),
    c = b('CurrentUser').isWorkUser() ? i._('Continue watching while you use Workplace')  : i._('Continue watching while you use Facebook');
    c = b('React').createElement(b('AbstractButton.react'), babelHelpers['extends']({
    }, b('TooltipData').propsFor(c, 'above'), {
      className: '_zbd',
      'data-testid': b('VideoWebDriverIDs').WNS_CONTROL,
      disabled: this.props.disabled,
      image: a,
      label: i._('Enter Watch And Scroll'),
      labelIsHidden: !0,
      onClick: this.onButtonClick.bind(this),
      onMouseOut: this.onMouseOut.bind(this),
      ref: 'button',
      tabIndex: this.props.tabIndex,
      type: 'button'
    }));
    a = i._('Video not playing?');
    var d = i._('Click to load the video while you continue using Facebook');
    a = b('React').createElement(b('XUIAmbientNUX.react'), {
      alignment: 'right',
      contextRef: function () {
        return this.refs.button
      }.bind(this),
      customwidth: 250,
      onCloseButtonClick: this.$1,
      shown: this.props.showWNSNUX,
      position: 'above',
      width: 'custom'
    }, b('React').createElement('div', {
      className: '_302j'
    }, a), d);
    return b('React').createElement('span', null, c, a)
  };
  a.propTypes = {
    onEnterWatchAndScroll: c.func,
    tabIndex: c.string
  };

It's all react and dynamic updates.
So probably it would be better to contact Facebook about this part of the code. And see if they stumble upon something else.

Flags: needinfo?(kdubost) → needinfo?(miket)
Whiteboard: [contactready]

Contacted on the partner mailing list.

Whiteboard: [contactready] → [sitewait]

Thanks Karl.

(In reply to Karl Dubost💡 :karlcow from comment #5)

The login for watching video is probably Bug 1322001

(Note, the video plays without logging in, it's just the "continue watching while surfing" button/feature that requires it)

Flags: needinfo?(miket)

(In reply to Anca Soncutean [:Anca], Desktop Release QA from comment #1)

Not a regression, I could see this issue way back to Fx 54.0a1.

Note: the same issue happens in Chrome, too. So, it's not a Firefox-specific issue. (And I see it on Linux as well, so it's not Mac-specific).

FYI to anyone on Facebook's end who's investigating this: it looks like Facebook is swapping classes on an element with this sprite as its background-image:
https://www.facebook.com/rsrc.php/v3/yq/r/YLFx01sX0p8.png
...and that class-swap impacts the background-position property in a way that changes the icon that's selected from the sprite.

Also, I couldn't reproduce this 100% of the time, but I did hit it at least once in both Firefox Nightly 67 and in Chrome 74 "dev channel".

OS: macOS → All
Hardware: All → Desktop
Summary: [OSX] Clicking the “Volume” button highlights the “Continue watching while you use Facebook” button → Clicking the “Volume” button highlights the “Continue watching while you use Facebook” button

At time 0:11-0:12, you can see the relevant CSS change that causes the problem, when the icon goes from blue to white.

The <i> element selected in the left pane here is a wrapper around that blue rectangular icon, and you can see its class attribute change at around 0:12 seconds, and you can see that changes the uppermost matched CSS rule in devtools' central pane to change as well, which adjusts the background-position property from 0 -42px to 0 -63px, which selects a further-down slice of the image sprite.

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Reproduced on the latest Nightly build 71.0a1 (2019-09-10) on Windows 7 x64.

You need to log in before you can comment on or make changes to this bug.