Bug 1536767 - Import WebCompat GoFaster 4.1.0 sources. r=kmag,rhelmer

Differential Revision: https://phabricator.services.mozilla.com/D24150

--HG--
extra : moz-landing-system : lando

browser/extensions/webcompat/injections.js

@@ -84,6 +84,24 @@ for (const injection of [
       matches: ["*://*.sreedharscce.in/authenticate"],
       css: [{file: "injections/css/bug1526977-sreedharscce.in-login-fix.css"}],
     },
+  }, {
+    id: "bug1518781",
+    platform: "desktop",
+    domain: "twitch.tv",
+    bug: "1518781",
+    contentScripts: {
+      matches: ["*://*.twitch.tv/*"],
+      css: [{file: "injections/css/bug1518781-twitch.tv-webkit-scrollbar.css"}],
+    },
+  }, {
+    id: "bug1305028",
+    platform: "desktop",
+    domain: "gaming.youtube.com",
+    bug: "1305028",
+    contentScripts: {
+      matches: ["*://gaming.youtube.com/*"],
+      css: [{file: "injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css"}],
+    },
   },
 ]) {
   Injections.push(injection);

browser/extensions/webcompat/injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css

@@ -0,0 +1,14 @@
+/**
+ * gaming.youtube.com - The vertical scrollbar displayed for the main pane is
+ * partially overlapped by the video itself
+ * Bug #1305028 - https://bugzilla.mozilla.org/show_bug.cgi?id=1305028
+ *
+ * The scrollbar in the main player area is overlapped by the player, making the
+ * design look broken. In Chrome, YouTube is using ::-webkit-scrollbar to style
+ * the bar to match their expectations, but this doesn't work in Firefox.
+ * To make it look less broken, we hide the scrollbar for the main video pane
+ * entirely.
+ */
+ytg-scroll-pane.ytg-watch-page {
+  scrollbar-width: none;
+}

browser/extensions/webcompat/injections/css/bug1518781-twitch.tv-webkit-scrollbar.css

@@ -0,0 +1,14 @@
+/**
+ * twitch.tv - Comment interaction button is overlayed by scrollbar
+ * Bug #1518781 - https://bugzilla.mozilla.org/show_bug.cgi?id=1518781
+ *
+ * The interaction buttons in Twitch' chat are partly overlayed by the
+ * scrollbar, which makes them hard to use. Twitch uses
+ * ::-webkit-scrollbar to make the scrollbar thinner, which isn't working in
+ * Firefox.
+ * Given that even scrollbar-width: thin; is not enough (see Bugzilla), let's
+ * remove it entirely.
+ */
+.video-chat__message-list-wrapper {
+  scrollbar-width: none;
+}

browser/extensions/webcompat/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Web Compat",
   "description": "Urgent post-release fixes for web compatibility.",
-  "version": "4.0.0",
+  "version": "4.1.0",
 
   "applications": {
     "gecko": {

browser/extensions/webcompat/moz.build

@@ -23,6 +23,8 @@ FINAL_TARGET_FILES.features['webcompat@mozilla.org'] += [
 
 FINAL_TARGET_FILES.features['webcompat@mozilla.org']['injections']['css'] += [
   'injections/css/bug0000000-dummy-css-injection.css',
+  'injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css',
+  'injections/css/bug1518781-twitch.tv-webkit-scrollbar.css',
   'injections/css/bug1526977-sreedharscce.in-login-fix.css'
 ]
 

mobile/android/extensions/webcompat/injections.js

@@ -84,6 +84,24 @@ for (const injection of [
       matches: ["*://*.sreedharscce.in/authenticate"],
       css: [{file: "injections/css/bug1526977-sreedharscce.in-login-fix.css"}],
     },
+  }, {
+    id: "bug1518781",
+    platform: "desktop",
+    domain: "twitch.tv",
+    bug: "1518781",
+    contentScripts: {
+      matches: ["*://*.twitch.tv/*"],
+      css: [{file: "injections/css/bug1518781-twitch.tv-webkit-scrollbar.css"}],
+    },
+  }, {
+    id: "bug1305028",
+    platform: "desktop",
+    domain: "gaming.youtube.com",
+    bug: "1305028",
+    contentScripts: {
+      matches: ["*://gaming.youtube.com/*"],
+      css: [{file: "injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css"}],
+    },
   },
 ]) {
   Injections.push(injection);

mobile/android/extensions/webcompat/injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css

@@ -0,0 +1,14 @@
+/**
+ * gaming.youtube.com - The vertical scrollbar displayed for the main pane is
+ * partially overlapped by the video itself
+ * Bug #1305028 - https://bugzilla.mozilla.org/show_bug.cgi?id=1305028
+ *
+ * The scrollbar in the main player area is overlapped by the player, making the
+ * design look broken. In Chrome, YouTube is using ::-webkit-scrollbar to style
+ * the bar to match their expectations, but this doesn't work in Firefox.
+ * To make it look less broken, we hide the scrollbar for the main video pane
+ * entirely.
+ */
+ytg-scroll-pane.ytg-watch-page {
+  scrollbar-width: none;
+}

mobile/android/extensions/webcompat/injections/css/bug1518781-twitch.tv-webkit-scrollbar.css

@@ -0,0 +1,14 @@
+/**
+ * twitch.tv - Comment interaction button is overlayed by scrollbar
+ * Bug #1518781 - https://bugzilla.mozilla.org/show_bug.cgi?id=1518781
+ *
+ * The interaction buttons in Twitch' chat are partly overlayed by the
+ * scrollbar, which makes them hard to use. Twitch uses
+ * ::-webkit-scrollbar to make the scrollbar thinner, which isn't working in
+ * Firefox.
+ * Given that even scrollbar-width: thin; is not enough (see Bugzilla), let's
+ * remove it entirely.
+ */
+.video-chat__message-list-wrapper {
+  scrollbar-width: none;
+}

mobile/android/extensions/webcompat/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Web Compat",
   "description": "Urgent post-release fixes for web compatibility.",
-  "version": "4.0.0",
+  "version": "4.1.0",
 
   "applications": {
     "gecko": {

mobile/android/extensions/webcompat/moz.build

@@ -23,6 +23,8 @@ FINAL_TARGET_FILES.features['webcompat@mozilla.org'] += [
 
 FINAL_TARGET_FILES.features['webcompat@mozilla.org']['injections']['css'] += [
   'injections/css/bug0000000-dummy-css-injection.css',
+  'injections/css/bug1305028-gaming.youtube.com-webkit-scrollbar.css',
+  'injections/css/bug1518781-twitch.tv-webkit-scrollbar.css',
   'injections/css/bug1526977-sreedharscce.in-login-fix.css'
 ]