Commit b4b1cd38 authored by Tim Nguyen's avatar Tim Nguyen
Browse files

Bug 1441708 - Fix theme_icons in different configurations. r=jaws 

MozReview-Commit-ID: LWn4LUK5zI

--HG--
extra : rebase_source : a98e82e97492ebff263a38cca2622892d42efba1
parent e8981e59

browser/base/content/browser.css

+10 −14
Original line number Diff line number Diff line
@@ -369,25 +369,23 @@ toolbarpaletteitem { 
    list-style-image: var(--webextension-toolbar-image, inherit);

  }



  .webextension-browser-action:-moz-lwtheme-brighttext {

  toolbar[brighttext] .webextension-browser-action {

    list-style-image: var(--webextension-toolbar-image-light, inherit);

  }



  .webextension-browser-action:-moz-lwtheme-darktext {

  toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {

    list-style-image: var(--webextension-toolbar-image-dark, inherit);

  }



  .webextension-browser-action[cui-areatype="menu-panel"],

  toolbarpaletteitem[place="palette"] > .webextension-browser-action {

  .webextension-browser-action[cui-areatype="menu-panel"] {

    list-style-image: var(--webextension-menupanel-image, inherit);

  }



  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {

  :root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] {

    list-style-image: var(--webextension-menupanel-image-light, inherit);

  }



  .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,

  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {

  :root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme {

    list-style-image: var(--webextension-menupanel-image-dark, inherit);

  }
@@ -401,25 +399,23 @@ toolbarpaletteitem { 
    list-style-image: var(--webextension-toolbar-image-2x, inherit);

  }



  .webextension-browser-action:-moz-lwtheme-brighttext {

  toolbar[brighttext] .webextension-browser-action {

    list-style-image: var(--webextension-toolbar-image-2x-light, inherit);

  }



  .webextension-browser-action:-moz-lwtheme-darktext {

  toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {

    list-style-image: var(--webextension-toolbar-image-2x-dark, inherit);

  }



  .webextension-browser-action[cui-areatype="menu-panel"],

  toolbarpaletteitem[place="palette"] > .webextension-browser-action {

  .webextension-browser-action[cui-areatype="menu-panel"] {

    list-style-image: var(--webextension-menupanel-image-2x, inherit);

  }



  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {

  :root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] {

    list-style-image: var(--webextension-menupanel-image-2x-light, inherit);

  }



  .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,

  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {

  :root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme {

    list-style-image: var(--webextension-menupanel-image-2x-dark, inherit);

  }

browser/components/extensions/test/browser/browser_ext_browserAction_theme_icons.js

+145 −25
Original line number Diff line number Diff line
@@ -2,9 +2,6 @@ 
/* vim: set sts=2 sw=2 et tw=80: */

"use strict";



// PNG image data for a simple red dot.

const BACKGROUND = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";



const LIGHT_THEME_COLORS = {

  "accentcolor": "#FFF",

  "textcolor": "#000",
@@ -15,6 +12,11 @@ const DARK_THEME_COLORS = { 
  "textcolor": "#FFF",

};



const TOOLBAR_MAPPING = {

  "navbar": "nav-bar",

  "tabstrip": "TabsToolbar",

};



async function testBrowserAction(extension, expectedIcon) {

  let browserActionWidget = getBrowserActionWidget(extension);

  await promiseAnimationFrame();
@@ -23,11 +25,18 @@ async function testBrowserAction(extension, expectedIcon) { 
}



async function testStaticTheme(options) {

  let {themeType, themeIcons, withDefaultIcon} = options;

  let {

    themeData,

    themeIcons,

    withDefaultIcon,

    expectedIcon,

    defaultArea = "navbar",

  } = options;



  let manifest = {

    "browser_action": {

      "theme_icons": themeIcons,

      "default_area": defaultArea,

    },

  };
@@ -40,31 +49,32 @@ async function testStaticTheme(options) { 
  await extension.startup();



  // Confirm that the browser action has the correct default icon before a theme is loaded.

  let expectedDefaultIcon = withDefaultIcon ? "default.png" : "dark.png";

  let toolbarId = TOOLBAR_MAPPING[defaultArea];

  let expectedDefaultIcon;

  // Some platforms have dark toolbars by default, take it in account when picking the default icon.

  if (toolbarId && document.getElementById(toolbarId).hasAttribute("brighttext")) {

    expectedDefaultIcon = "light.png";

  } else {

    expectedDefaultIcon = withDefaultIcon ? "default.png" : "dark.png";

  }

  await testBrowserAction(extension, expectedDefaultIcon);



  let theme = ExtensionTestUtils.loadExtension({

    manifest: {

      "theme": {

        "images": {

          "headerURL": "background.png",

        },

        "colors": themeType === "light" ? LIGHT_THEME_COLORS : DARK_THEME_COLORS,

        "colors": themeData,

      },

    },

    files: {

      "background.png": BACKGROUND,

    },

  });



  await theme.startup();



  // Confirm that the correct icon is used when the theme is loaded.

  if (themeType == "light") {

    // The dark icon should be used if the theme is light.

  if (expectedIcon == "dark") {

    // The dark icon should be used if the area is light.

    await testBrowserAction(extension, "dark.png");

  } else {

    // The light icon should be used if the theme is dark.

    // The light icon should be used if the area is dark.

    await testBrowserAction(extension, "light.png");

  }
@@ -78,7 +88,8 @@ async function testStaticTheme(options) { 


add_task(async function browseraction_theme_icons_light_theme() {

  await testStaticTheme({

    themeType: "light",

    themeData: LIGHT_THEME_COLORS,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",
@@ -87,7 +98,8 @@ add_task(async function browseraction_theme_icons_light_theme() { 
    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeType: "light",

    themeData: LIGHT_THEME_COLORS,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",
@@ -103,7 +115,8 @@ add_task(async function browseraction_theme_icons_light_theme() { 


add_task(async function browseraction_theme_icons_dark_theme() {

  await testStaticTheme({

    themeType: "dark",

    themeData: DARK_THEME_COLORS,

    expectedIcon: "light",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",
@@ -112,7 +125,8 @@ add_task(async function browseraction_theme_icons_dark_theme() { 
    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeType: "dark",

    themeData: DARK_THEME_COLORS,

    expectedIcon: "light",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",
@@ -126,21 +140,127 @@ add_task(async function browseraction_theme_icons_dark_theme() { 
  });

});



add_task(async function browseraction_theme_icons_different_toolbars() {

  let themeData = {

    "accentcolor": "#000",

    "textcolor": "#fff",

    "toolbar": "#fff",

    "toolbar_text": "#000",

  };

  await testStaticTheme({

    themeData,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 19,

    }],

    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 16,

    }, {

      "light": "light.png",

      "dark": "dark.png",

      "size": 32,

    }],

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "light",

    defaultArea: "tabstrip",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 19,

    }],

    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "light",

    defaultArea: "tabstrip",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 16,

    }, {

      "light": "light.png",

      "dark": "dark.png",

      "size": 32,

    }],

  });

});



add_task(async function browseraction_theme_icons_overflow_panel() {

  let themeData = {

    "popup": "#000",

    "popup_text": "#fff",

  };

  await testStaticTheme({

    themeData,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 19,

    }],

    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "dark",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 16,

    }, {

      "light": "light.png",

      "dark": "dark.png",

      "size": 32,

    }],

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "light",

    defaultArea: "menupanel",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 19,

    }],

    withDefaultIcon: true,

  });

  await testStaticTheme({

    themeData,

    expectedIcon: "light",

    defaultArea: "menupanel",

    themeIcons: [{

      "light": "light.png",

      "dark": "dark.png",

      "size": 16,

    }, {

      "light": "light.png",

      "dark": "dark.png",

      "size": 32,

    }],

  });

});



add_task(async function browseraction_theme_icons_dynamic_theme() {

  let themeExtension = ExtensionTestUtils.loadExtension({

    manifest: {

      permissions: ["theme"],

    },

    files: {

      "background.png": BACKGROUND,

    },

    background() {

      browser.test.onMessage.addListener((msg, colors) => {

        if (msg === "update-theme") {

          browser.theme.update({

            "images": {

              "headerURL": "background.png",

            },

            "colors": colors,

          });

          browser.test.sendMessage("theme-updated");