Backed out 6 changesets (bug 1409148) for failing mochitest caps/tests/mochitest/test_bug292789.html on Android. r=backout on a CLOSED TREE

Backed out changeset 6fe2a24e51ca (bug 1409148)
Backed out changeset 0b032b6e0655 (bug 1409148)
Backed out changeset 78eebd668bf1 (bug 1409148)
Backed out changeset acfd8cf8c4ec (bug 1409148)
Backed out changeset 4d486418cd55 (bug 1409148)
Backed out changeset 0da5d54d003c (bug 1409148)

--HG--
rename : toolkit/themes/shared/plugins/plugin-blocked.svg => browser/themes/shared/notification-icons/plugin-blocked.svg
rename : toolkit/themes/shared/plugins/plugin.svg => browser/themes/shared/notification-icons/plugin.svg

browser/base/content/test/plugins/browser.ini

@@ -26,7 +26,6 @@ support-files =
   plugin_hidden_to_visible.html
   plugin_iframe.html
   plugin_outsideScrollArea.html
-  plugin_overlay_styles.html
   plugin_overlayed.html
   plugin_positioned.html
   plugin_simple_blank.swf
@@ -72,7 +71,6 @@ tags = blocklist
 tags = blocklist
 [browser_CTP_outsideScrollArea.js]
 tags = blocklist
-[browser_CTP_overlay_styles.js]
 [browser_CTP_remove_navigate.js]
 tags = blocklist
 [browser_CTP_resize.js]

browser/base/content/test/plugins/browser_CTP_notificationBar.js

@@ -82,8 +82,8 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 3b, overlay should be blank.");
+    Assert.ok(!overlay || !overlay.classList.contains("visible"),
+      "Test 3b, overlay should be hidden.");
   });
 });
 
@@ -109,8 +109,8 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 4b, overlay should be blank.");
+    Assert.ok(!overlay || !overlay.classList.contains("visible"),
+      "Test 4b, overlay should be hidden.");
   });
 });
 

browser/base/content/test/plugins/browser_CTP_outsideScrollArea.js

@@ -58,7 +58,7 @@ add_task(async function() {
     let doc = content.document;
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
     Assert.ok(overlay && overlay.classList.contains("visible") &&
-              overlay.getAttribute("sizing") != "blank",
+              !overlay.classList.contains("minimal"),
               "Test 2, overlay should be visible.");
   });
 });
@@ -88,7 +88,7 @@ add_task(async function() {
     let doc = content.document;
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
     Assert.ok(overlay && overlay.classList.contains("visible") &&
-              overlay.getAttribute("sizing") != "blank",
+              !overlay.classList.contains("minimal"),
               "Test 3, overlay should be visible.");
   });
 });
@@ -116,7 +116,7 @@ add_task(async function() {
     let plugin = content.document.getElementById("test");
     let doc = content.document;
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 4, overlay should be blank.");
+    Assert.ok(!overlay || !overlay.classList.contains("visible"),
+      "Test 4, overlay should be hidden.");
   });
 });

browser/base/content/test/plugins/browser_CTP_overlay_styles.js

@@ -1,93 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-/* This test ensures that the click-to-play "Activate Plugin" overlay
- * is shown in the right style (which is dependent on its size).
- */
-
-const rootDir = getRootDirectory(gTestPath);
-const gTestRoot = rootDir.replace("chrome://mochitests/content/", "http://127.0.0.1:8888/");
-
-var gTestBrowser = null;
-
-const gTestcases = {
-
-  // 10x10
-  testcase1: {
-    sizing: "blank",
-    notext: null,
-  },
-
-  // 40x40
-  testcase2: {
-    sizing: "tiny",
-    notext: "notext",
-  },
-
-  // 100x70
-  testcase3: {
-    sizing: "reduced",
-    notext: "notext",
-  },
-
-  // 200x200
-  testcase4: {
-    sizing: null,
-    notext: "notext",
-  },
-
-  // 300x300
-  testcase5: {
-    sizing: null,
-    notext: null,
-  },
-}
-
-
-add_task(async function() {
-  registerCleanupFunction(function() {
-    clearAllPluginPermissions();
-    setTestPluginEnabledState(Ci.nsIPluginTag.STATE_ENABLED, "Test Plug-in");
-    gBrowser.removeCurrentTab();
-    gTestBrowser = null;
-  });
-});
-
-add_task(async function() {
-  gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser);
-  gTestBrowser = gBrowser.selectedBrowser;
-
-  setTestPluginEnabledState(Ci.nsIPluginTag.STATE_CLICKTOPLAY, "Test Plug-in");
-
-  let popupNotification = PopupNotifications.getNotification("click-to-play-plugins", gTestBrowser);
-  ok(!popupNotification, "Sanity check, should not have a click-to-play notification");
-
-  await promiseTabLoadEvent(gBrowser.selectedTab, gTestRoot + "plugin_overlay_styles.html");
-
-  // Work around for delayed PluginBindingAttached
-  await promiseUpdatePluginBindings(gTestBrowser);
-
-  await ContentTask.spawn(gTestBrowser, gTestcases, async function(testcases) {
-    let doc = content.document;
-
-    for (let testcaseId of Object.keys(testcases)) {
-      let plugin = doc.querySelector(`#${testcaseId} > object`);
-      let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-      Assert.ok(overlay, `overlay exists in ${testcaseId}`);
-
-      let expectations = testcases[testcaseId];
-
-      Assert.ok(overlay.classList.contains("visible") == true,
-                `The expected visibility is correct in ${testcaseId}`);
-
-      Assert.ok(overlay.getAttribute("sizing") == expectations.sizing,
-                `The expected sizing is correct in ${testcaseId}`);
-
-      Assert.ok(overlay.getAttribute("notext") == expectations.notext,
-                `The expected notext is correct in ${testcaseId}`);
-    }
-  });
-});

browser/base/content/test/plugins/browser_CTP_resize.js

@@ -46,8 +46,8 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 2, overlay should be blank.");
+    Assert.ok(!overlay || overlay.classList.contains("minimal"),
+      "Test 2, overlay should be hidden.");
   });
 });
 
@@ -64,8 +64,8 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 3, overlay should be blank.");
+    Assert.ok(!overlay || overlay.classList.contains("minimal"),
+      "Test 3, overlay should be hidden.");
   });
 });
 
@@ -84,7 +84,7 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(overlay && overlay.getAttribute("sizing") != "blank",
+    Assert.ok(overlay && overlay.classList.contains("visible"),
       "Test 4, overlay should be visible.");
   });
 });
@@ -104,8 +104,8 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(!overlay || overlay.getAttribute("sizing") == "blank",
-      "Test 5, overlay should be blank.");
+    Assert.ok(!overlay || overlay.classList.contains("minimal"),
+      "Test 5, overlay should be hidden.");
   });
 });
 
@@ -124,7 +124,7 @@ add_task(async function() {
     let doc = content.document;
     let plugin = doc.getElementById("test");
     let overlay = doc.getAnonymousElementByAttribute(plugin, "anonid", "main");
-    Assert.ok(overlay && overlay.getAttribute("sizing") != "blank",
+    Assert.ok(overlay && overlay.classList.contains("visible"),
       "Test 6, overlay should be visible.");
   });
 });

browser/base/content/test/plugins/browser_CTP_shouldShowOverlay.js

@@ -7,12 +7,6 @@
 /* This test ensures that the click-to-play "Activate Plugin" overlay
  * is shown when expected.
  * All testcases are in the plugin_shouldShowOverlay.html file.
- *
- * Note: Technically, the overlay is *always* shown. When this test was
- * originally written, the meaning of "shown" was "shown with the contents",
- * as opposed to "shown as blank". The behavior hasn't changed, but the naming
- * has: now, a "shown as blank" overlay no longer receives a ".hidden" class.
- * It receives a sizing="blank" attribute.
  */
 
 var rootDir = getRootDirectory(gTestPath);
@@ -55,7 +49,7 @@ add_task(async function() {
       Assert.ok(overlay, `overlay exists in ${testcase.id}`);
 
       let expectedVisibility = (testcase.getAttribute("shouldshow") == "true");
-      Assert.ok((overlay.getAttribute("sizing") != "blank") == expectedVisibility,
+      Assert.ok(overlay.classList.contains("visible") == expectedVisibility,
                 `The expected visibility is correct in ${testcase.id}`);
     }
   })

browser/base/content/test/plugins/plugin_overlay_styles.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-</head>
-<body>
-
-  <div id="testcase1" class="testcase">
-    <object width="10" height="10" type="application/x-test"></object>
-  </div>
-
-  <div id="testcase2" class="testcase">
-    <object width="40" height="40" type="application/x-test"></object>
-  </div>
-
-  <div id="testcase3" class="testcase">
-    <object width="100" height="70" type="application/x-test"></object>
-  </div>
-
-  <div id="testcase4" class="testcase">
-    <object width="200" height="200" type="application/x-test"></object>
-  </div>
-
-  <div id="testcase5" class="testcase">
-    <object width="300" height="300" type="application/x-test"></object>
-  </div>
-
-</body>
-</html>

browser/base/content/test/plugins/plugin_test.html

@@ -4,6 +4,6 @@
 <meta charset="utf-8">
 </head>
 <body>
-<embed id="test" style="width: 300px; height: 300px" type="application/x-test">
+<embed id="test" style="width: 200px; height: 200px" type="application/x-test">
 </body>
 </html>

browser/modules/PluginContent.jsm

@@ -30,14 +30,9 @@ this.PluginContent = function(global) {
 const FLASH_MIME_TYPE = "application/x-shockwave-flash";
 const REPLACEMENT_STYLE_SHEET = Services.io.newURI("chrome://pluginproblem/content/pluginReplaceBinding.css");
 
-const OVERLAY_DISPLAY = {
-  HIDDEN: 0, // The overlay will be transparent
-  BLANK: 1, // The overlay will be just a grey box
-  TINY: 2, // The overlay with a 16x16 plugin icon
-  REDUCED: 3, // The overlay with a 32x32 plugin icon
-  NOTEXT: 4, // The overlay with a 48x48 plugin icon and the close button
-  FULL: 5, // The full overlay: 48x48 plugin icon, close button and label
-};
+const OVERLAY_DISPLAY_HIDDEN = 0;
+const OVERLAY_DISPLAY_VISIBLE = 1;
+const OVERLAY_DISPLAY_MINIMAL = 2;
 
 PluginContent.prototype = {
   init(global) {
@@ -294,80 +289,44 @@ PluginContent.prototype = {
    * Update the visibility of the plugin overlay.
    */
   setVisibility(plugin, overlay, overlayDisplayState) {
-    overlay.classList.toggle("visible", overlayDisplayState != OVERLAY_DISPLAY.HIDDEN);
-    if (overlayDisplayState != OVERLAY_DISPLAY.HIDDEN) {
+    overlay.classList.toggle("visible", overlayDisplayState != OVERLAY_DISPLAY_HIDDEN);
+    overlay.classList.toggle("minimal", overlayDisplayState == OVERLAY_DISPLAY_MINIMAL)
+    if (overlayDisplayState == OVERLAY_DISPLAY_VISIBLE) {
       overlay.removeAttribute("dismissed");
     }
   },
 
   /**
-   * Adjust the style in which the overlay will be displayed. It might be adjusted
-   * based on its size, or if there's some other element covering all corners of
-   * the overlay.
+   * Check whether the plugin should be visible on the page. A plugin should
+   * not be visible if the overlay is too big, or if any other page content
+   * overlays it.
    *
-   * This function will handle adjusting the style of the overlay, but will
-   * not handle hiding it. That is done by setVisibility with the return value
-   * from this function.
-   *
-   * @returns A value from OVERLAY_DISPLAY.
+   * This function will handle showing or hiding the overlay.
+   * @returns true if the plugin is invisible.
    */
-  computeAndAdjustOverlayDisplay(plugin, overlay) {
+  computeOverlayDisplayState(plugin, overlay) {
     let fallbackType = plugin.pluginFallbackType;
     if (plugin.pluginFallbackTypeOverride !== undefined) {
       fallbackType = plugin.pluginFallbackTypeOverride;
     }
     if (fallbackType == Ci.nsIObjectLoadingContent.PLUGIN_CLICK_TO_PLAY_QUIET) {
-      return OVERLAY_DISPLAY.HIDDEN;
+      return OVERLAY_DISPLAY_HIDDEN;
     }
 
     // If the overlay size is 0, we haven't done layout yet. Presume that
     // plugins are visible until we know otherwise.
     if (overlay.scrollWidth == 0) {
-      return OVERLAY_DISPLAY.FULL;
+      return OVERLAY_DISPLAY_VISIBLE;
     }
 
-    let overlayDisplay = OVERLAY_DISPLAY.FULL;
-
     // Is the <object>'s size too small to hold what we want to show?
     let pluginRect = plugin.getBoundingClientRect();
-    let pluginWidth = Math.ceil(pluginRect.width);
-    let pluginHeight = Math.ceil(pluginRect.height);
-
-    // We must set the attributes while here inside this function in order
-    // for a possible re-style to occur, which will make the scrollWidth/Height
-    // checks below correct. Otherwise, we would be requesting e.g. a TINY
-    // overlay here, but the default styling would be used, and that would make
-    // it overflow, causing it to change to BLANK instead of remaining as TINY.
-
-    if (pluginWidth <= 32 || pluginHeight <= 32) {
-      overlay.setAttribute("sizing", "blank");
-      overlayDisplay = OVERLAY_DISPLAY.BLANK;
-    } else if (pluginWidth <= 80 || pluginHeight <= 60) {
-      overlayDisplay = OVERLAY_DISPLAY.TINY;
-      overlay.setAttribute("sizing", "tiny");
-      overlay.setAttribute("notext", "notext");
-    } else if (pluginWidth <= 120 || pluginHeight <= 80) {
-      overlayDisplay = OVERLAY_DISPLAY.REDUCED;
-      overlay.setAttribute("sizing", "reduced");
-      overlay.setAttribute("notext", "notext");
-    } else if (pluginWidth <= 240 || pluginHeight <= 160) {
-      overlayDisplay = OVERLAY_DISPLAY.NOTEXT;
-      overlay.removeAttribute("sizing");
-      overlay.setAttribute("notext", "notext");
-    } else {
-      overlayDisplay = OVERLAY_DISPLAY.FULL;
-      overlay.removeAttribute("sizing");
-      overlay.removeAttribute("notext");
-    }
-
-
     // XXX bug 446693. The text-shadow on the submitted-report text at
     //     the bottom causes scrollHeight to be larger than it should be.
-    let overflows = (overlay.scrollWidth > pluginWidth) ||
-                    (overlay.scrollHeight - 5 > pluginHeight);
+    let overflows = (overlay.scrollWidth > Math.ceil(pluginRect.width)) ||
+                    (overlay.scrollHeight - 5 > Math.ceil(pluginRect.height));
     if (overflows) {
-      overlay.setAttribute("sizing", "blank");
-      return OVERLAY_DISPLAY.BLANK;
+      return OVERLAY_DISPLAY_MINIMAL;
     }
 
     // Is the plugin covered up by other content so that it is not clickable?
@@ -394,12 +353,11 @@ PluginContent.prototype = {
       }
       let el = cwu.elementFromPoint(x, y, true, true);
       if (el === plugin) {
-        return overlayDisplay;
+        return OVERLAY_DISPLAY_VISIBLE;
       }
     }
 
-    overlay.setAttribute("sizing", "blank");
-    return OVERLAY_DISPLAY.BLANK;
+    return OVERLAY_DISPLAY_HIDDEN;
   },
 
   addLinkClickCallback(linkNode, callbackName /* callbackArgs...*/) {
@@ -518,7 +476,7 @@ PluginContent.prototype = {
     if (eventType == "PluginPlaceholderReplaced") {
       plugin.removeAttribute("href");
       let overlay = this.getPluginUI(plugin, "main");
-      this.setVisibility(plugin, overlay, OVERLAY_DISPLAY.FULL);
+      this.setVisibility(plugin, overlay, OVERLAY_DISPLAY_VISIBLE);
       let inIDOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
                           .getService(Ci.inIDOMUtils);
       // Add psuedo class so our styling will take effect
@@ -603,10 +561,10 @@ PluginContent.prototype = {
     if (eventType != "PluginCrashed") {
       if (overlay != null) {
         this.setVisibility(plugin, overlay,
-                           this.computeAndAdjustOverlayDisplay(plugin, overlay));
+                           this.computeOverlayDisplayState(plugin, overlay));
         let resizeListener = () => {
           this.setVisibility(plugin, overlay,
-            this.computeAndAdjustOverlayDisplay(plugin, overlay));
+            this.computeOverlayDisplayState(plugin, overlay));
           this.updateNotificationUI();
         };
         plugin.addEventListener("overflow", resizeListener);
@@ -945,9 +903,9 @@ PluginContent.prototype = {
       if (!overlay) {
         continue;
       }
-      let overlayDisplayState = this.computeAndAdjustOverlayDisplay(plugin, overlay);
+      let overlayDisplayState = this.computeOverlayDisplayState(plugin, overlay);
       this.setVisibility(plugin, overlay, overlayDisplayState);
-      if (overlayDisplayState > OVERLAY_DISPLAY.BLANK) {
+      if (overlayDisplayState == OVERLAY_DISPLAY_VISIBLE) {
         actions.delete(info.permissionString);
         if (actions.size == 0) {
           break;
@@ -1131,21 +1089,21 @@ PluginContent.prototype = {
     let link = this.getPluginUI(plugin, "reloadLink");
     this.addLinkClickCallback(link, "reloadPage");
 
-    let overlayDisplayState = this.computeAndAdjustOverlayDisplay(plugin, overlay);
+    let overlayDisplayState = this.computeOverlayDisplayState(plugin, overlay);
 
     // Is the <object>'s size too small to hold what we want to show?
-    if (overlayDisplayState != OVERLAY_DISPLAY.FULL) {
+    if (overlayDisplayState != OVERLAY_DISPLAY_VISIBLE) {
       // First try hiding the crash report submission UI.
       statusDiv.removeAttribute("status");
 
-      overlayDisplayState = this.computeAndAdjustOverlayDisplay(plugin, overlay);
+      overlayDisplayState = this.computeOverlayDisplayState(plugin, overlay);
     }
     this.setVisibility(plugin, overlay, overlayDisplayState);
 
     let doc = plugin.ownerDocument;
     let runID = plugin.runID;
 
-    if (overlayDisplayState == OVERLAY_DISPLAY.FULL) {
+    if (overlayDisplayState == OVERLAY_DISPLAY_VISIBLE) {
       // If a previous plugin on the page was too small and resulted in adding a
       // notification bar, then remove it because this plugin instance it big
       // enough to serve as in-content notification.

browser/themes/shared/jar.inc.mn

@@ -68,6 +68,8 @@
   skin/classic/browser/notification-icons/persistent-storage-blocked.svg    (../shared/notification-icons/persistent-storage-blocked.svg)
   skin/classic/browser/notification-icons/persistent-storage.svg            (../shared/notification-icons/persistent-storage.svg)
   skin/classic/browser/notification-icons/plugin-badge.svg                  (../shared/notification-icons/plugin-badge.svg)
+  skin/classic/browser/notification-icons/plugin-blocked.svg                (../shared/notification-icons/plugin-blocked.svg)
+  skin/classic/browser/notification-icons/plugin.svg                        (../shared/notification-icons/plugin.svg)
   skin/classic/browser/notification-icons/popup.svg                         (../shared/notification-icons/popup.svg)
   skin/classic/browser/notification-icons/popup-subitem.svg                 (../shared/notification-icons/popup-subitem.svg)
   skin/classic/browser/notification-icons/screen-blocked.svg                (../shared/notification-icons/screen-blocked.svg)

browser/themes/shared/notification-icons.inc.css

@@ -223,12 +223,12 @@ html|*#webRTC-previewVideo {
 /* PLUGINS */
 
 .plugin-icon {
-  list-style-image: url(chrome://mozapps/skin/plugins/plugin.svg);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin.svg);
   transition: fill 1.5s;
 }
 
 .plugin-blocked-icon {
-  list-style-image: url(chrome://mozapps/skin/plugins/plugin-blocked.svg);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-blocked.svg);
   transition: fill 1.5s;
 }
 
@@ -260,7 +260,7 @@ html|*#webRTC-previewVideo {
 }
 
 .plugin-blocked > .plugin-icon {
-  list-style-image: url(chrome://mozapps/skin/plugins/plugin-blocked.svg);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-blocked.svg);
   fill: #d92215 !important;
 }
 

browser/themes/shared/plugin-doorhanger.inc.css

@@ -1,5 +1,5 @@
 .messageImage[value="plugin-hidden"] {
-  list-style-image: url(chrome://mozapps/skin/plugins/plugin.svg);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin.svg);
 }
 
 /* Keep any changes to this style in sync with pluginProblem.css */
@@ -10,5 +10,5 @@ notification.pluginVulnerable {
 }
 
 notification.pluginVulnerable .messageImage {
-  list-style-image: url(chrome://mozapps/skin/plugins/plugin-blocked.svg);
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-blocked.svg);
 }

caps/tests/mochitest/test_bug292789.html

@@ -56,8 +56,8 @@ function testScriptSrc(aCallback) {
 
 /** <img src=""> tests **/
 var img_global = "chrome://global/skin/media/error.png";
-var img_mozapps = "chrome://mozapps/skin/profile/profileicon.png";
-var res_mozapps = "resource://gre/chrome/toolkit/skin/classic/mozapps/profile/profileicon.png";
+var img_mozapps = "chrome://mozapps/skin/plugins/contentPluginClose.png";
+var res_mozapps = "resource://gre/chrome/toolkit/skin/classic/mozapps/plugins/contentPluginClose.png";
 
 var imgTests = [[img_global, "success"],
                 [img_mozapps, "fail"],

toolkit/locales/en-US/chrome/pluginproblem/pluginproblem.dtd

@@ -3,6 +3,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!-- LOCALIZATION NOTE (tapToPlayPlugin): Mobile (used for touch interfaces) only has one type of plugin possible. -->
+<!ENTITY pluginActivationWarning                             "This site uses a plugin that may slow &brandShortName;.">
 <!ENTITY tapToPlayPlugin                                     "Tap here to activate plugin.">
 <!ENTITY clickToActivatePlugin                               "Activate plugin.">
 <!ENTITY checkForUpdates                                     "Check for updates…">

toolkit/pluginproblem/content/pluginProblem.xml

@@ -27,6 +27,7 @@
                 <html:label>
                     <html:button class="icon" anonid="icon"/>
                     <html:div class="msg msgVulnerabilityStatus" anonid="vulnerabilityStatus"><!-- set at runtime --></html:div>
+                    <html:div class="msg msgActivationWarning">&pluginActivationWarning;</html:div>
                     <html:div class="msg msgTapToPlay">&tapToPlayPlugin;</html:div>
                     <html:div class="msg msgClickToPlay" anonid="clickToPlay">&clickToActivatePlugin;</html:div>
                 </html:label>

toolkit/pluginproblem/content/pluginProblemContent.css

@@ -68,6 +68,11 @@ a .mainBox:focus,
   visibility: visible;
 }
 
+.minimal > .hoverBox,
+.minimal > .closeIcon {
+  visibility: hidden;
+}
+
 .mainBox[chromedir="rtl"] {
   direction: rtl;
 }
@@ -92,6 +97,7 @@ a .hoverBox,
 
 a .msgClickToPlay,
 :-moz-handler-clicktoplay .msgClickToPlay,
+:-moz-handler-clicktoplay .msgActivationWarning,
 :-moz-handler-vulnerable-updatable .msgVulnerabilityStatus,
 :-moz-handler-vulnerable-updatable .msgCheckForUpdates,
 :-moz-handler-vulnerable-updatable .msgClickToPlay,

toolkit/themes/shared/mozapps.inc.mn

@@ -25,8 +25,6 @@
   skin/classic/mozapps/extensions/alerticon-info-positive.svg (../../shared/extensions/alerticon-info-positive.svg)
   skin/classic/mozapps/extensions/alerticon-info-negative.svg (../../shared/extensions/alerticon-info-negative.svg)
   skin/classic/mozapps/extensions/category-legacy.svg        (../../shared/extensions/category-legacy.svg)
-  skin/classic/mozapps/plugins/plugin.svg                    (../../shared/plugins/plugin.svg)
-  skin/classic/mozapps/plugins/plugin-blocked.svg            (../../shared/plugins/plugin-blocked.svg)
   skin/classic/mozapps/plugins/pluginGeneric.svg             (../../shared/extensions/category-plugins.svg)
   skin/classic/mozapps/plugins/pluginProblem.css             (../../shared/plugins/pluginProblem.css)
   skin/classic/mozapps/aboutNetworking.css                   (../../shared/aboutNetworking.css)
@@ -34,7 +32,9 @@
   skin/classic/mozapps/aboutProfiles.css                     (../../shared/aboutProfiles.css)
 #endif
   skin/classic/mozapps/aboutServiceWorkers.css               (../../shared/aboutServiceWorkers.css)
+  skin/classic/mozapps/plugins/contentPluginActivate.png     (../../shared/plugins/contentPluginActivate.png)
   skin/classic/mozapps/plugins/contentPluginBlocked.png      (../../shared/plugins/contentPluginBlocked.png)
+  skin/classic/mozapps/plugins/contentPluginClose.png        (../../shared/plugins/contentPluginClose.png)
   skin/classic/mozapps/plugins/contentPluginCrashed.png      (../../shared/plugins/contentPluginCrashed.png)
   skin/classic/mozapps/plugins/contentPluginStripe.png       (../../shared/plugins/contentPluginStripe.png)
 

toolkit/themes/shared/plugins/pluginProblem.css

@@ -6,12 +6,6 @@
 
 /* These styles affect only the bound element, not other page content. */
 /* Keep any changes to these styles in sync with plugin-doorhanger.inc.css */
-.mainBox {
- --grey-10: #f9f9fa;
- --grey-60: #4a4a4f;
- --grey-70: #38383d;
-}
-
 .mainBox {
   font: message-box;
   font-size: 12px;
@@ -33,10 +27,12 @@
   height: 100%;
 }
 :-moz-handler-vulnerable-updatable .hoverBox:active,
-:-moz-handler-vulnerable-no-update .hoverBox:active {
+:-moz-handler-vulnerable-no-update .hoverBox:active,
+:-moz-handler-clicktoplay .hoverBox:active {
   background-color: rgb(65, 65, 65);
 }
 
+:-moz-handler-clicktoplay .hoverBox:active .msgClickToPlay,
 :-moz-handler-vulnerable-updatable .hoverBox:active .msgClickToPlay,
 :-moz-handler-vulnerable-no-update .hoverBox:active .msgClickToPlay {
   color: red;
@@ -58,12 +54,10 @@ html|a {
   height: 48px;
   background-position: center;
   background-repeat: no-repeat;
-  background-size: contain;
   border: none;
   background-color: transparent;
   -moz-user-focus: ignore;
   margin-bottom: 6px;
-  -moz-context-properties: fill;
 }
 
 :-moz-handler-vulnerable-updatable .icon,
@@ -76,8 +70,7 @@ html|a {
 }
 a .icon,
 :-moz-handler-clicktoplay .icon {
-  background-image: url(chrome://mozapps/skin/plugins/plugin.svg);
-  fill: var(--grey-10);
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginActivate.png);
   -moz-user-focus: normal;
 }
 :-moz-handler-crashed .icon {
@@ -97,6 +90,10 @@ a .icon,
   }
 }
 
+.msgClickToPlay {
+  text-decoration: underline;
+}
+
 /* on desktop, don't ever show the tap-to-play UI: that is for mobile only */
 :-moz-handler-clicktoplay .msgTapToPlay,
 a .msgTapToPlay  {
@@ -158,27 +155,23 @@ a .msgTapToPlay  {
 
 .closeIcon {
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   margin-top: 4px;
-  margin-inline-start: -24px;
+  margin-inline-start: -20px;
   margin-inline-end: 4px;
   border: none;
-  border-radius: 2px;
   background-color: transparent;
-  background-image: url(chrome://global/skin/icons/close.svg);
+  background-image: url("chrome://mozapps/skin/plugins/contentPluginClose.png");
   background-repeat: no-repeat;
-  -moz-context-properties: fill, fill-opacity;
-  fill-opacity: 0;
-  fill: var(--grey-10);
 }
 
 .closeIcon:hover {
-  fill-opacity: .1;
+  background-position: -16px 0;
 }
 
 .closeIcon:hover:active {
-  fill-opacity: .2;
+  background-position: -32px 0;
 }
 
 .action-link {
@@ -199,54 +192,3 @@ a .msgTapToPlay  {
 :-moz-handler-vulnerable-updatable .action-link:active {
   background-color: #801409;
 }
-
-/* New Photon styling
- *
- * At the moment, these rules are written to only override
- * :-moz-handler-clicktoplay styling. Once we finish the
- * redesign for all cases, we can change the CSS directly
- * above instead of writing these super-specific rules.
- */
-:-moz-handler-clicktoplay .mainBox {
-  background-color: var(--grey-70);
-}
-
-:-moz-handler-clicktoplay .msgClickToPlay {
-  font-size: 13px;
-}
-
-:-moz-handler-clicktoplay .mainBox[sizing=blank] .hoverBox {
-  visibility: hidden;
-}
-
-:-moz-handler-clicktoplay .mainBox[sizing=tiny] .icon {
-  width: 16px;
-  height: 16px;
-}
-
-:-moz-handler-clicktoplay .mainBox[sizing=reduced] .icon {
-  width: 32px;
-  height: 32px;
-}
-
-:-moz-handler-clicktoplay .mainBox[sizing=blank] .closeIcon,
-:-moz-handler-clicktoplay .mainBox[sizing=tiny] .closeIcon,
-:-moz-handler-clicktoplay .mainBox[sizing=reduced] .closeIcon {
-  display: none;
-}
-
-:-moz-handler-clicktoplay .mainBox[notext] .msgClickToPlay {
-  display: none;
-}
-
-:-moz-handler-clicktoplay .mainBox[notext] .icon {
-  /* Override a `margin-bottom: 6px` now that .msgClickToPlay
-   * below the icon is no longer shown, in order to achieve
-   * a perfect vertical centering of the icon.
-   */
-  margin-bottom: 0;
-}
-
-:-moz-handler-clicktoplay .hoverBox:active {
-  background-color: var(--grey-60);
-}