planet.webcompat.com

otsukare by Karl Dubost at

Two Japanese national holidays during the week. And there goes the week. Tune of the Week: Anderson .Paak - Silicon Valley

Webcompat Life

Progress this week:

Today: 2016-09-26T09:24:48.064519
336 open issues
----------------------
needsinfo       13
needsdiagnosis  110
needscontact    9
contactready    27
sitewait        161
----------------------

You are welcome to participate

  • Monday day off in Japan: Respect for the elders.
  • Thursday day off in Japan: Autumn Equinox.

Firefox 49 has been released and an important piece of cake is delivered now to every users. You can get some context on why some (not all) -webkit- landed on Gecko and the impact on Web standards.

We have a team meeting soon in Taipei.

The W3C was meeting this week in Lisbon. Specifically about testing.

I did a bit of Prefetch links testing and how they appear in devtools.

Webcompat issues

(a selection of some of the bugs worked on this week).

  • Little by little we are accumulating our issues list about CSS zoom. Firefox is the only one to not support the non-standard property. It's coming from (Trident) IE was imported in WebKit (Safari), then maintained alive in Blink (Chrome, Opera) to finally come into Edge. Sadness.

Webcompat.com development

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Busy week without much things done for bugs. W3C is heading to Lisbon for the TPAC, so tune of the week: Amalia Rodrigues. I'll be there in spirit.

Webcompat Life

Progress this week:

326 open issues
----------------------
needsinfo       12
needsdiagnosis  106
needscontact    8
contactready    28
sitewait        158
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • yet another appearance: none implemented in Blink. This time for meter.

Webcompat.com development

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Because we type code. We do mistakes. Today by chance my fingers typed viewpoet instead of viewport. It made me smile right away and I had to find out if I was the only one who did that typo but in actual code. So I started to search for broken code.

  • viewpoet

    Example: <meta name="viewpoet" content="width=devide-width">

  • transitoin

    Example: this.$element.on("transitoinEnd webkitTransitionEnd", function() {

  • gradeint

    Example: background: linear-gradeint($direction, $color-stops);

  • devixe

    Example: <meta name="viewport" content="width=devixe-width, initial-scale=1.0">

Slip of mind, dyslexia, keys close to each other, many reasons to do beautiful typos. As Descartes was saying:

I do typos therefore I am.

Otsukare!

otsukare by Karl Dubost at

Discovering a new thing to eat on a local market and Tune of the week: Pastoral Symphony - Beethoven

Webcompat Life

Progress this week:

314 open issues
----------------------
needsinfo       10
needsdiagnosis  98
needscontact    19
contactready    31
sitewait        149
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • When your design is only working in Blink and probably not because the developer meant to make it work for Blink, but probably because it was only tested with this rendering engine.
  • A problem with PNG, not being sure of the origin of the issue, I opened a bug on Core/ImageLib. The PNG file is working in WebKit and Blink, not in Gecko.
  • When a Gecko/Firefox rendering issue is in fact a Blink/Chrome bug, probably inherited from Webkit/Safari. This is a symptom of a pattern where one rendering engine is trusted and not checked against specs and other browsers.
  • Going through a lot of the yahoo.co.jp Web sites, around 100 of them to assess the ones which are working and those who are failing. I should probably something about it.

Webcompat.com development

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

Mike Taylor's Web Log by Mike Taylor at

It's almost Septemberween, which means it's that time of the year we gather 'round our spinning MacBook fans and share website ghost stories:

The tale of the disappearing burger and lobster site content (i.e., webcompat bug 2760).

Chapter 1.

Once upon a time (that time being the present), there was this burger and lobster "restaurant" called, um well, burger and lobster. In Firefox, as of today, the site content never renders — you just end up with some fancy illustrations (none of which are burgers or lobsters).

Opening devtools, you've got the following mysterious stacktrace:

Error: node is undefined
compositeLinkFn@http://www.burgerandlobster.../angular-1.2.25.js:6108:13
compositeLinkFn@http://www.burgerandlobster.../angular-1.2.25.js:6108:13
nodeLinkFn@http://www.burgerandlobster.../angular-1.2.25.js:6705:24
(...stack frames descend into hell...)
jQuery@http://www.burgerandlobster.../jquery-1.11.1.js:73:10
@http://www.burgerandlobster.../jquery-1.11.1.js:3557:1
@http://www.burgerandlobster.../jquery-1.11.1.js:34:3
@http://www.burgerandlobster.../jquery-1.11.1.js:15:2

Cool, time to debug AngularJS.

But it turns out that leads nowhere besides the abyss, AKA funtions that return functions that compose with other functions with dollar signs in them... and the bug is elsewhere. Besides, Chrome has a similar error, and the page works there. Just a haunted node, maybe.

Dennis Schubert discovered that adding a <base href="/"> fixes the site, which happens to be required by Angular is later versions for $locationProvider.html5Mode. But this bug has nothing to do with pushState or history, or even SVG xlink:hrefs, all of which the <base> element can affect.

Another (dead) rabbit hole, another dead end (spooky).

At some point, all your debugging tricks and intuitions fail and it's time to just page a thousand lines of framework-specific JS into your brain and see where that leads. Two hours later, if you're lucky, you notice something weird like so:

var illustArr = [
  {
    "url": "/Assets/images/illustrations/alert-man.png",
    "x": "2508",
    "y": "2028"
  },
...
(bunch of similar objects objects, then...)
  {
    "url": "",
    "x": "",
    "y": ""
  };

And you recall a method that dispatches a allImagesLoaded event which tells the app it's OK to load the rest of the page content. It looks like this:

b.allImagesLoaded = function() {
  d += 1,
  d === a.imageArr.length && $("body").trigger("allImagesLoaded")
}

But it only does that once it's counted that all images have loaded (or fired an error event):

l.loadImage = function(a) {
  var b = $(document.createElement("div"))
    , c = $(document.createElement("img"));
  [...]
  c.attr("src", a.url),
  [...]
  c.bind("load error", function(e) {
      $(this).addClass("illustration--show"),
      h.allImagesLoaded()
  })
}

So yeah, that looks fishy. And that's why Firefox gets stuck—it doesn't fire error events when img.src is set to the empty string, which is required per HTML. Here's a small test case, which also demonstrates why the <base href="/"> fixed the page—it'll fire an error event when requesting an image from the site root (and eventually barf on the HTML, I guess).

Anyways, the Gecko bug for that is Bug 599975. That will probably get fixed soon.

Epilogue.

So what's the moral of this ghost story? There is none. Septemberween is cruel that way.

otsukare by Karl Dubost at

Viewport

We had a couple of Web Compatibility issues on the rendering of some sites related to the viewport information. Here after is a preliminary test for trying to figure out what are the sources of variability.

The major visible difference is only for the last case where Firefox and Chrome do something different.

I haven't tested all combinations yet. Just a couple to have an idea. This is preliminary work to figure out the Web Compatibility space.

Maybe I can adjust tests in the future.

case A and case F below seems to highlight differences in between Gecko and Blink. Chrome seems to apply different logic for resizing the content.

Device parameters for the test

Using this page instrospection tool

Safari 9.0 OS 9.3.5

window.innerWidth = 320
window.outerWidth = 0
window.screen.width = 320
document.documentElement.clientWidth = 320
window.devicePixelRatio = 2

Firefox Nightly 51

window.innerWidth = 360
window.outerWidth = 360
window.screen.width = 360
document.documentElement.clientWidth = 360
window.devicePixelRatio = 3

Chrome/Opera 52

window.innerWidth = 360
window.outerWidth = 360
window.screen.width = 360
document.documentElement.clientWidth = 360
window.devicePixelRatio = 3

Results for different viewport content adaptation

  1. width=250 with 700px paragraph
  2. width=250 with free width paragraph
  3. width=450 with 700px paragraph
  4. width=450 with free width paragraph
  5. common no scalable viewport with 700px paragraph
  6. scalable viewport with 700px paragraph

Case A. width=250px with larger paragraph

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Case B. width=250px with no paragraph size

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Case C. width=550px with larger paragraph

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Case D. width=450px with no paragraph size

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Case E. not scalable with larger paragraph

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Case F. scalable with larger paragraph

Screenshot of chrome viewport

Screenshot of firefox viewport

Screenshot of safari viewport

Otsukare!

otsukare by Karl Dubost at

Sometimes you just need to clean up the bottom of this drawer where bugs have accumulated and gathered dust. But by the end of it, it brings light to your work and process. Tune of the week: Jamiroquai - Cosmic Girl

Webcompat Life

Progress this week:

Today: 2016-09-05T08:10:37.674672
312 open issues
----------------------
needsinfo       9
needsdiagnosis  93
needscontact    17
contactready    31
sitewait        148
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • Still going through the list of old bugs. So most of this week has been bug triage and contacting.

Reading List

  • Review of input type='number' and its implementations.
  • ❤️ Memento: "Adding Memento support to versioning systems allows a client to uniformly access the version of a resource that was active at a certain moment in time (TimeGate) and to obtain its version history (TimeMap). When a version page in a system that supports Memento links to a resource that resides in another system that supports Memento, a client can uniformly access the version of the linked resource that was active at the same moment in time. "

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Let's develop a bit more on an issue that we have identified last week.

On the croma Web site, they have a fairly common form.

Croma Store Form

As you can notice the instruction "Select City" for selecting an item is in the form itself. And the markup of the form looks like this.

<div class="ib">
    <!-- Customization start here for store locator -->
    <div id="citydropdown" name="citydropdown" class="inpBox">
        <select id="city" name="city" onchange="drop_down_list1()">

            <option value="" style="display: none">Select City</option>

            <option value="AHMEDABAD">AHMEDABAD</option>
            <option value="AURANGABAD">AURANGABAD</option>
            <option value="BANGALORE">BANGALORE</option>
            <option value="CHANDIGARH">CHANDIGARH</option>
            <option value="CHENNAI">CHENNAI</option>
            <option value="FARIDABAD">FARIDABAD</option>
            <option value="GHAZIABAD">GHAZIABAD</option>
            <option value="GREATER NOIDA">GREATER NOIDA</option>
            <option value="GURGAON">GURGAON</option>
            <option value="HYDERABAD">HYDERABAD</option>
            <option value="MUMBAI">MUMBAI</option>
            <option value="NASIK">NASIK</option>
            <option value="NEW DELHI">NEW DELHI</option>
            <option value="NOIDA">NOIDA</option>
            <option value="PUNE">PUNE</option>
            <option value="RAJKOT">RAJKOT</option>
            <option value="SURAT">SURAT</option>
            <option value="VADODARA">VADODARA</option>
        </select>
    </div>
</div>

Basically the developers are trying to make the "Select City" instruction non selectable. It works in Safari (WebKit) and Opera/Chrome (Blink) with slight differences. I put up a reduced test case if you want to play with it.

The bug with display: none

It fails in Firefox (Gecko) in an unexpected way and only for e10s windows. The full list of options is not being displayed once the first one is set to display: none

Test results on Firefox

Do not do this!

If you really want the instruction to be part of the form, choose to do

<div class="ib">
    <!-- Customization start here for store locator -->
    <div id="citydropdown" name="citydropdown" class="inpBox">
        <select id="city" name="city" onchange="drop_down_list1()">

            <option value="" hidden selected disabled>Select City</option>

            <option value="AHMEDABAD">AHMEDABAD</option>
            <option value="AURANGABAD">AURANGABAD</option>
            <!-- cut for brevity -->
        </select>
    </div>
</div>

This will have the intended effect and will "work everywhere". It is still not the best way to do it, but at least it is kind of working except in some cases for accessibility reasons (I added the proper way below).

That said, it should not fail in Gecko. I opened a bug on Mozilla Bugzilla and Neil Deakin already picked it up with a patch.

Quite cool! This will probably be uplifted to Firefox 49 and 50.

select menu form, the proper way

There are a couple of issues with regards to accessibility and the proper way to create a form. This following would be better:

<div class="ib">
    <div id="citydropdown" name="citydropdown" class="inpBox">
        <label for="city">Select City</label>
        <select id="city" name="city" onchange="drop_down_list1()">
            <option value="AHMEDABAD">AHMEDABAD</option>
            <option value="AURANGABAD">AURANGABAD</option>
            <!-- cut for brevity -->
        </select>
    </div>
</div>

The label is an instruction outside of the options list, that tools will pick up and associate with the right list.

I see the appeal for people to have the instruction to be part of the drop down. And I wonder if there would be an accessible way to create this design. I wonder if an additional attribute on label instructing the browser to put inside as a non selectable item of the select list of option it targets with the for attribute.

Otsukare!

otsukare by Karl Dubost at

A moderate typhoon landed this week just above us. Winds in one direction. The peace of the eye of the typhoon. Finally the winds in the opposite direction. Magnificent. The day after it was a cemetery for insects. Tragedy. So it was mostly a week for old bugs cleaning.

The spectacle of the society, the society of spectacle. The turn of international events and the rise of arguments instead of discussions is mesmerizingly sad. Tune of the week: DJ Shadow feat. Run The Jewels - Nobody Speak

Webcompat Life

Progress this week:

Today: 2016-08-29T07:47:04.454102
295 open issues
----------------------
needsinfo       4
needsdiagnosis  83
needscontact    18
contactready    28
sitewait        146
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • option doesn't like display: none on Gecko at least. It hides the full list. I opened a new bug for Gecko. This is happening only in e10s windows. And there is already a patch in the making.
  • Not really a webcompat issue, but Google alerts breaking on small screens.
  • Sometimes bugs are not bugs. This is one delicate part of webcompat. Can we reproduce? Reproducing a bug is not always straightforward. It sometimes depends on the capabilities of your own devices (mobile AND desktop). But the cool thing is when the use is coming back and says "Hey sorry it seems to be working now." Thanks for this. It's very useful.

WebCompat.com dev

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

From the seventh floor, I see the cheminey of a local sento. It's not always on. The smoke is not coming out, it gives me a good visual feedback of the opening hours. It's here. It doesn't have notifications. It doesn't have ics, atom. It's just there. And it's fine as-is. The digital world seems sometimes to create complicated UI and UX over things which are just working. They become disruptive but not helpful.

Tune of the week: Leo Ferré - Avec le temps

Webcompat Life

Progress this week:

Today: 2016-08-22T13:46:36.150030
300 open issues
----------------------
needsinfo       4
needsdiagnosis  86
needscontact    18
contactready    28
sitewait        156
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

WebCompat.com dev

Reading List

  • Return of the 10kB Web design contest. Good stuff. I spend a good chunk of my time in the network panel of devtools… And it's horrific.

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Cicadas are an interesting insect. They live most of their time as a nymph under the ground in between 2 and 5 years, but some species live until 17 years before coming out and die six weeks after. What does it tell us about all the hidden work we put during our lifetime and blooms and shines for only a couple of hours.

Tune of the week: Ella Fitzgerald - Summertime (1968)

Webcompat Life

Progress this week:

Today: 2016-08-15T08:58:55.633182
298 open issues
----------------------
needsinfo       4
needsdiagnosis  80
needscontact    17
contactready    29
sitewait        158
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • Gecko and Blink/WebKit have different default CSS border-width values for the input element. It breaks a site. If we decide to fix it in Gecko, do we break other sites relying on this default value?
  • Performance issues on a heavy map Web site, though I'm not sure it is really a Web compatibility issue. It looks like more of something related to Gecko.
  • Another issue related to layout with a content inside a form. I need to dig a bit more.
  • no tap on priceline
  • Use chrome only for transcribeme
  • When using element.removeEventListener('event', callback) never forgets the second argument because it fails in Firefox, though that seems to be working in Chrome.
  • mask, background and mask-image difference creates immaterial design. The most important now being to really find what is the source of the issue.

WebCompat.com dev

  • Is invalid always the right keyword for closing an issue? From our side (project owner) it is invalid because it is not in the scope of the project, or there isn't enough details to reproduce. But from the user's perspective who had genuinely an issue (whatever the issue is), it can be felt as a strong rejection along the lines of "We don't care about you". Maybe we should find a better way of closing issues when they are out of scope.

Reading List

  • More a quote of the day, but spot on: > Wondering how long it will take for publishers to realize it’s Medium that desperately needs them and not the other way around.
  • And another one from Adam. And I really wish we could do that in a cool way! > <adam_s> Almost at our 3000th bug on webcompat.com. The lucky reporter who hits 3000 wins a broken light bulb

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Tune of the week: Patti LaBelle - Somewhere Over the Rainbow

Webcompat Life

Progress this week:

Today: 2016-08-08T08:22:45.867497
283 open issues
----------------------
needsinfo       5
needsdiagnosis  62
needscontact    16
contactready    29
sitewait        157
----------------------

You are welcome to participate

We had a Web compat meeting this week and we welcomed a new team member: Dennis Schubert.

Webcompat issues

(a selection of some of the bugs worked on this week).

  • WebKit css for hiding/showing the menu bar on a responsive layout, it will be solved on Firefox 49
  • Almost every week, we are adding issues to the HLS/M3U8 bug. That's the top report we currently get on webcompat.
  • Yet another example that any hacks will break in the future. On this bug, the links are not working in Firefox. A strange rule x:-moz-any-link, x:default was applied to the CSS. This was ignored by other browsers. It seems it is a Firefox 3.0 hack which is widely distributed through sites like CSS Tricks. They also do strange things when using select.
  • WebP support in mod_pagespeed is full of user agent sniffing. I followed the trail of different updates. And because this specific Web site probably relies on an older version of mod_pagespeed it breaks in Firefox Android. The irony is that it will probably break in the future if finally WebP is supported by Gecko.
  • Some outreach contact leads are very hard to find. If you know someone working for SMASH or FujiRock festival, please tell me.
  • Funky issues with a JavaScript for cutting out text through canvas which doesn't work currently in Firefox.
  • We have a recurring issue with a newsletter/sweepstake web site. I haven't nailed down what was happening.

WebCompat.com dev

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Tune of the week: Rico Loop in One Shot because it's what we basically do on a daily basis on the Web. Remixing tools, code and knowledge when we encounter them along our way to create and solve issues. The last two weeks I have been staying at the seventh floor, it offers new perspectives on the work and the mind.

Webcompat Life

Progress this week:

Today: 2016-08-01T07:10:39.302548
294 open issues
----------------------
needsinfo       5
needsdiagnosis  70
needscontact    16
contactready    33
sitewait        165
----------------------

You are welcome to participate

And you would think that there is no issue with the way create their scripts. function openBrowser(). They could have just simply named it: function openChromeMonoculture().

Webcompat issues

(a selection of some of the bugs worked on this week).

  • A string of issues with Bank of America. As usual it's a bit frustrating given that when faking the Chrome User Agent, we get a better user experience than with the bare Firefox User Agent, which in turns is silly because each time we fake the UA, we end up reducing the stats of Firefox into the global site market share, which… makes it impossible for Firefox to become parts of the supported browsers. Chicken and egg.
    • Bug 1280834 Bank of America recommends other browsers on OSX. (also webc 2787
    • Bug 784463 - Firefox Android receives Desktop site instead of mobile site
  • Canadian Tire is another hard issue to crack. Maybe we should associate webcompat.com to Pokémon Go and have users collect bugs in all Canadian Tire bugs.
  • Interesting issue on linkedin layout with a combination of table CSS layout which doesn't seem to behave the same in Chrome and Firefox.
  • There is a redirection issue in between Firefox and Chrome using HTTP 302 to capture the location and opening the appropriate app. In this case it's between Calendar and Hangout. It seems less than ideal when the non standard `intent://`` was used for this in the past.
  • On this one, we receive on Firefox Android a WebP image (WebP is not supported yet in Firefox) instead of jpeg. Maybe there is something related to the optimization rules of pagespeed.

WebCompat.com dev

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Each time I "set up my office" (moved to a new place for the next 3 months, construction work on the main home), I'm mesmerized by how easy it is to set up a work environment. Laptop, wifi and electricity are the main things needed to start. A table and a chair are useful but non essential. And eventually an additional screen to have more working surface to be comfortable. Basically in 5 minutes we are ready to work. And that's one chance of our area of work. How long does it take before you can start working?

Working with a view on Enoshima for the next 3 months. Tune of the week: Omoide no Enoshima.

Webcompat Life

Progress this week:

Today: 2016-07-25T06:21:33.702789
296 open issues
----------------------
needsinfo       5
needsdiagnosis  71
needscontact    14
contactready    34
sitewait        164
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • Time to time, people are reporting usability issues which are more or less cross-browsers. They basically hinder every browsers. It's out scope for the Web Compatibility project, but hint at something interesting about browsers and users perception. Often, I wonder if browsers should do more than just supporting the legacy Web site (aka it displays), but also adjust the content to a more palatable experience. Somehow the way, Reader mode is doing on user request, a beautify button for legacy content.
  • Google Image Search and black arrow. A kind of cubist arrow for Firefox. Modern design?
  • I opened an issue on Tracking Protection and Webcompat. Adam pointed me this morning to a project on moving tracking protection to a Web extension.
  • Because we have more issues on Firefox Desktop and Firefox Android, we focus our energy there, so we need someone in the community to focus on Firefox OS issues.
  • When I test Web sites on Firefox Android, I usually do it through the remote debugging in WebIDE and instead of typing a long URI on the device itself, I usually go to the console and paste the address I want window.location = 'http://example.com/long/path/with/strange/356374389dgjlkj36s'.
  • Starting to test a bit more in depth what appearance means in different browsers. Specifically to determine what is needed for Web compatibility and/or Web standards.
  • a WONTFIX which is a good news. Bug 1231829 - Implement -webkit-border-image quirks for compatibility. It means it has been fixed by the site owners.
  • On this Find my phone issue on Google search, the wrong order of CSS properties creates a layout issue where the XUL -moz-box was finally interpreted, but it triggered a good question from Xidorn. Should we expose the XUL display values to Web content? Add to that that some properties in the CSS never existed.
  • hangout doesn't work the same way for Chrome and Firefox. There's something happening either on the Chrome side or the servers, which creates the right path of actions. I haven't determined it yet.

WebCompat.com dev

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

Adam Stevenson's Blog by Adam Stevenson at

I’ve been trying to learn more about how screenshots can help us identify compatibility issues in Firefox. It started with the question:

How does Firefox compare to Chrome in the top 100 websites?

Pretty good it turns out, on the front pages at least, you can view them yourself [Some images are offensive and NSFW]. You can also check out the same list of sites but comparing Firefox to Firefox with tracking protection. I made some scripts to capture the screens in OSX. They make use of the screencapture utility and this other cool little utility called GetWindowID. GetWindowID determines which Window ID is associated to a program on the screen, Firefox or Chrome in this case.

Let’s look at how these utilities work together.

Running the GetWindowID command requires that we specify which program we are looking for and which tab is active as well. I’ve made sure that my version of Firefox starts up with the Mozilla Firefox Start Page. If we execute this command:

./GetWindowID "Firefox" "Mozilla Firefox Start Page";

It returns a numeric value like:
1072

This is great because the screencapture utility needs to know which window ID to look at.
So let’s take that same GetWindowID command from earlier and store the result into a variable called ‘gcwindow’.

gcwindow=$(./GetWindowID "Firefox" "Mozilla Firefox Start Page");

Now gcwindow has the value 1072 from before. Let’s feed that into the screencapture utility:

screencapture -t jpg -T 40 -l $gcwindow -x ~/Desktop/screens/firefoxtest/$site.jpg;

When this runs the program will wait 40 seconds from the "-T 40” parameter then take a screenshot of Window ID 1072, which is our Firefox instance. The JPG file will be stored in a folder on my desktop under screens/firefoxtest. The rest of the script is looping through each website name that we’ve entered, opening a new browser window, opening the website we want to capture, killing the browser process after each screenshot and some sleep commands in between that give the computer time to execute each step.

There are some browser preferences and considerations that you will want to be aware of before running these scripts.

Why do all this in OSX? Cause I like to work on a mac, I guess. OK I don’t have a good reason but if you want to make it work on a Linux docker or something cool that’d be super sweet. The other thing to keep in mind is I’m looking at viewport screenshots right now, full page would be nice, but we’ll get there.

So the side by side comparison of popular sites is pretty useful but looking at things is a lot of work. It would be cool if we could automate some or all of that looking, right? Luckily there are image comparison tools that can help with this. I decided to try out Yahoo’s blink-diff tool which is built using node.js.

First off only PNG’s are supported with this tool, but that’s easy to change using the screencapture command line tool.

So we use 'screencapture -t png’ instead of 'screencapture -t jpg’.

Let’s go through setting this up for a single test. You’ll need to have node.js installed first.
We need to create a new folder, the name isn’t important.

mkdir onetime-diff

Then download this javascript file from Github and put it in that folder. Now let’s initialize our project:

npm init

And just accept all the defaults. Next let’s install the dependancies:

npm install blink-diff
npm install pngjs-image

Great, it’s ready to run now. The index.js file we downloaded looks for two files in the same folder called firefox.png and chrome.png and will generate a file called output.png. If you need a couple files to test with:

firefox.png
chrome.png

Note that if you provide your own PNG files, you may need to adjust the cropping parameters. I’ve configured the script to work best for Firefox and Chrome screenshots captured on a retina display, if you aren’t using a retina display divide those numbers by 2. You can see here y:160 and y:144, this is cropping out the top portion of the screenshot where the browser's “chrome” is.

cropImageA: { x:0, y:160, width:0, height:0 }, // Firefox
cropImageB: { x:0, y:144, width:0, height:0 }, // Chrome

Once you’re ready to run the test, execute:

node index.js

After a minute, it should generate an output.png file that looks like this and the script will return a result to the command prompt:

Passed
Found 1116908 differences.

So this is a good start, we have an image comparison program and an automated screenshot utility. To make it more useful I created another script that combines these together. On a high level it works like this:

First site > Screenshot Firefox > Screenshot Chrome > Compare images in background process > Next Site...

It has the same dependancies as before, but now we run it like this:

./start.sh

After giving this is a few runs and playing with the settings, I started to see some issues.

  • Advertisements placed in different positions, sizes, style or even amount
  • Regional site redirects
  • Different home page, providing a ‘fresh look’ or they are A/B testing
  • Site surveys or other pop ups
  • Large image sliders
  • Random overlay pop up ads
  • Rotating background images
  • Very slow process when using one computer

We want each site to have a decent amount of time to load, I normally use between 30-40 seconds. But that adds up over 1000 or more sites. I decided to hack something basic together to allow multiple computers in my house to split the load. It helps but it would be much better to have this running on Linux virtual machines or dockers.

So what’s next?

  • More sample runs to find a decent set of parameters for the baseline
  • Identifying in the top 1000 sites, which ones will continue to fail
  • Can we set higher thresholds and still detect when something breaks?
  • Can the tool ignore areas that are constantly changing?
  • Get the results out in the open for others to look at

If any of this interests you and want to get involved, I’d love to hear from you. Or if you have advice on how to make this better, please reach out as well.

otsukare by Karl Dubost at

Tracking protection is an interesting beast. A feature to help users but users think the site is broken. I guess it's something similar to habits. If you put a mask on your face and you have forgotten about it, you may be surprised that people do not want to talk to you.

Webcompat Life

Progress this week:

Today: 2016-07-19T11:32:54.030052
316 open issues
----------------------
needsinfo       5
needsdiagnosis  76
needscontact    20
contactready    41
sitewait        168
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

  • issue with MLB site displaying the plays.
  • Interesting CSS issue about display:table and max-height having a different behavior in Chrome and Firefox, maybe something related to a known issue. To be confirmed.
  • Enabling Tracking Protection in Firefox creates a lot of issues, which are not completely understood by users. We are starting to have a set of Web Compatibility reports because the site breaks or crashes when tracking protection is enabled. Usually, the JavaScript code of the site didn't take into account that some people might want to block some of the page assets, and this creates unintended consequences. There is probably something around UX to improve here. So users really understand their choices.

WebCompat.com dev

Reading List

  • CSS Containment.

    the contain property, which indicates that the element’s subtree is independent of the rest of the page.

    If I understand, this seems like something which would answer many of the complaints we hear from Web developers about CSS isolation. Specifically the layout term: contain: layout.

    This value turns on layout containment for the element. This ensures that the containing element is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.

    Implemented in Blink. I didn't find an issue on WebKit project (Safari). I didn't find a bug in Mozilla Bugzilla either. Can I use?. Probably no.

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Summer in its full heat has started in Japan. I'll follow the sun, Beatles.

Webcompat Life

Progress this week:

Today: 2016-07-11T09:55:26.360775
346 open issues
----------------------
needsinfo       5
needsdiagnosis  74
needscontact    33
contactready    50
sitewait        165
----------------------

You are welcome to participate

We had a short team meeting.

Webcompat issues

(a selection of some of the bugs worked on this week).

  • offsetWidth creates issue on this site. Hallvord may have found the origin of the issue. It would require a test case to show the differences in between Blink, Edge and Gecko to be extra-sure. The definition of offsetWidth in Gecko: NS_IMETHOD GetOffsetWidth(int32_t *aOffsetWidth) = 0; which leads to OffsetWidth() BUT Daniel found the culprit. This is fixed in Aurora and Nightly so will be soon working on production releases.
  • Google Search and Firefox Android (when faking the user agent to be Chrome) is giving an almost working site. There's only one issue when requesting images on the tab. Almost there. Note that this is already working in Firefox Nightly because of the implementation of some WebKit properties.

WebCompat.com dev

  • I finally came around fixing a "bug" when rewriting Link headers I had introduced in webcompat.com and that one of our interns discovered when solving another issue.
  • Fixed our contributions guidelines to be a bit stricter on the Pull Request review policy. Summary: You should not merge if you are the pull request submitter and the pull request needs an r+ before expecting to move forward.
  • Started to work on a logging feature for webcompat.com to detect potential abuse of the service. For now, let's not over-engineer it and make it very simple. It requires the service for log rotation and keep only the last two weeks, and the actual logging in Flask, and also a change of policy.
  • Also trying to make a bit more square the repo for issue parsing so that external people can participate. This is in progress.
  • When interacting a lot with GitHub, I was thinking it would be nice to have an up-to-date mocking python module of GitHub API. Maybe that could be done by parsing the API documentation and extracting the tables and responses and then creating the mocking service. Just food for thoughts. Even better would be github giving a JSON file describing all routes, HTTP codes, and responses.

Reading List

  • Rust and Rest. Replace REST by HTTP in that article and it's a nice read.

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

Subscriptions