1512224 - gradients stop rendering in e.g. titlebars of RAP applications, if -moz-linear-gradient support is dropped

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect, P1)

Description

[Clemens Eisserer]

Attachment: wr_diff.jpg

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

1. opened a web-application which is based on the RAP framework, e.g.: http://rap.eclipsesource.com/demo/release/workbench/


Actual results:

2. rendering issues (window title bar, button gradients, table header gradients) after updating to the lastest nightly on both, Skylake HD 620 and AMD Kaveri 7650k with Mesa 18.2.4

this worked fine not that long ago, so I assume it is a regression.


Expected results:

rendering with WR enabled should match the "old" rendering pipeline.

Comment 1

[Clemens Eisserer]

Update: contrary to my initial believ, the issue is not caused by webrender. RAP applications are broken in nightly regardless of webrender being enabled or not.

Comment 2

[Darkspirit]

> 24:07.93 INFO: Last good revision: a0e0ae690520f845febd99f243e7910fda287aad
> 24:07.93 INFO: First bad revision: 54649cf34d98c313a706c333b395b1aff6c3c260
> 24:07.93 INFO: Pushlog:
> https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a0e0ae690520f845febd99f243e7910fda287aad&tochange=54649cf34d98c313a706c333b395b1aff6c3c260

> 54649cf34d98	Daniel Holbert — Bug 1337655 part 2: Turn off moz-prefixed CSS gradient functions for nightly. r=emilio
> 11965d6a2fca	Daniel Holbert — Bug 1337655 part 1: Move some prefixed gradient values to pref-controlled sections of property_database.js. r=emilio

Comment 3

[Daniel Holbert [:dholbert]]

The titlebar element here has inline style attribute which has a single prefixed gradient expression (no unprefixed standards-based fallback). It looks like this:

  <div style="position: absolute;
              background: -moz-linear-gradient(-90deg, rgb(65, 102, 147) 0%,
                          rgb(88, 130, 181) 100%) repeat scroll 0% 0%,
                          rgb(0, 128, 192) none repeat scroll 0% 0%;
              overflow: hidden; outline: currentcolor none medium;
              border-width: 0px; border-style: none;
              width: 798px; height: 27px; min-height: 38px; max-height: 38px;
              left: 0px; top: 0px; margin: 0px;">

I think that styling only shows up if I have layout.css.prefixes.gradients set to true, which probably means they're setting it via "elem.style.background = [...]" and the value is failing to parse when we don't support prefixed gradients.

I think the script in question is here:
http://rap.eclipsesource.com/demo/release/workbench/rwt-resources/320/rap-client.js


Specifically this (prettified) chunk:

        _getGradientString: rwt.util.Variant.select(_[5], {
          'webkit|blink': function (g) {
            var e = [
              'linear',
              _[331]
            ];
            if (g.horizontal === true) {
              e.push(_[305])
            } else {
              e.push(_[366])
            }
            for (var f = 0; f < g.length; f++) {
              var c = g[f][0];
              var d = g[f][1];
              e.push(_[506] + c + ',' + d + ')')
            }
            return this.VENDOR_PREFIX_VALUE + 'gradient( ' + e.join() + ')'
          },
          gecko: function (g) {
            var e = [
              g.horizontal === true ? '0deg' : '-90deg'
            ];
            for (var f = 0; f < g.length; f++) {
              var c = (g[f][0] * 100) + '%';
              var d = g[f][1];
              e.push(d + ' ' + c)
            }
            return this.VENDOR_PREFIX_VALUE + _[182] + e.join() + ')'
          },
          trident: function (c) {
            if (rwt.client.Client.getMajor() === 9) {
              return this._getSvgGradientString(c)
            }
            return this._getDefaultGradientString(c)
          },
          'default': function (c) {
            return this._getDefaultGradientString(c)
          }


getDefaultGradientString is implemented as follows:
        _getDefaultGradientString: function (g) {
          var e = [
            g.horizontal === true ? '90deg' : '180deg'
          ];
          for (var f = 0; f < g.length; f++) {
            var c = (g[f][0] * 100) + '%';
            var d = g[f][1];
            e.push(d + ' ' + c)
          }
          return _[182] + e.join() + ')'
        },

(Here, "_[182]" is probably the string "linear-gradient( " I think.)


So, bottom line: as in bug 1183994, this seems to be a case where the framework is proactively recognizing that we are Firefox and selectively giving us *only* the -moz-prefixed gradient syntax, even though they know how to construct the modern syntax.

If we can get in touch with the developers, we should suggest that they simply remove the Firefox special case here, and just serve Firefox the default standards-based gradient string here.

Comment 4

[Mike Taylor [:miketaylr]]

Adam, can you help try to get in touch with the right folks on the RAP project to get this fixed?

Comment 5

[Daniel Holbert [:dholbert]]

FWIW, I tried to report a bug in eclipse's bugzilla instance ( https://bugs.eclipse.org/bugs/ ), but my account got insta-flagged for "spam" and locked/closed for some reason, so my bug report didn't end up being logged.

Comment 6

[Daniel Holbert [:dholbert]]

Given that I backed out bug 1337655, I don't think we need to bother pushing on this anymore.  See bug 1337655 comment 53.

--> Clearing adam's needinfo since this probably isn't the best use of his time at this point.