From b5242f874812f27583bec1fdb0b1072a242c9ae3 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Tue, 7 Nov 2017 22:29:07 +0000 Subject: [PATCH] Add theme integrated sidebar example (#308) --- theme-integrated-sidebar/README.md | 15 +++++++++ theme-integrated-sidebar/manifest.json | 20 ++++++++++++ theme-integrated-sidebar/sidebar.html | 19 ++++++++++++ theme-integrated-sidebar/sidebar.js | 43 ++++++++++++++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 theme-integrated-sidebar/README.md create mode 100644 theme-integrated-sidebar/manifest.json create mode 100644 theme-integrated-sidebar/sidebar.html create mode 100644 theme-integrated-sidebar/sidebar.js diff --git a/theme-integrated-sidebar/README.md b/theme-integrated-sidebar/README.md new file mode 100644 index 0000000..16f39d0 --- /dev/null +++ b/theme-integrated-sidebar/README.md @@ -0,0 +1,15 @@ +# Theme integrated sidebar + +## What it does + +An example using the theme API to integrate the interface of a sidebar_action to the current theme properties. + +## What it shows + +How to use the browser.theme.getCurrent(), browser.theme.onUpdated and the sidebar_action API. + +## Instructions to try this + +- Install a WebExtension theme that sets `accentcolor`, `toolbar` or `toolbar_text` +- Install this extension +- The sidebar should then use colors from the WebExtension theme \ No newline at end of file diff --git a/theme-integrated-sidebar/manifest.json b/theme-integrated-sidebar/manifest.json new file mode 100644 index 0000000..d3c10d6 --- /dev/null +++ b/theme-integrated-sidebar/manifest.json @@ -0,0 +1,20 @@ +{ + "description": "A sidebar that integrates with the current theme", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/theme-integrated-sidebar", + "manifest_version": 2, + "name": "Theme integrated sidebar", + "permissions": [ + "theme" + ], + "sidebar_action": { + "default_title": "Theme integrated sidebar", + "default_panel": "sidebar.html" + }, + "version": "1.0", + "applications": { + "gecko": { + "id": "theme-integrated-sidebar@mozilla.org", + "strict_min_version": "58.0a1" + } + } +} diff --git a/theme-integrated-sidebar/sidebar.html b/theme-integrated-sidebar/sidebar.html new file mode 100644 index 0000000..c336d76 --- /dev/null +++ b/theme-integrated-sidebar/sidebar.html @@ -0,0 +1,19 @@ + + + + My theme-integrated sidebar + + + +
This is an awesome themed element!
+ + + \ No newline at end of file diff --git a/theme-integrated-sidebar/sidebar.js b/theme-integrated-sidebar/sidebar.js new file mode 100644 index 0000000..93e81ba --- /dev/null +++ b/theme-integrated-sidebar/sidebar.js @@ -0,0 +1,43 @@ +function setSidebarStyle(theme) { + const myElement = document.getElementById("myElement"); + + // colors.frame and colors.accentcolor are aliases + if (theme.colors && (theme.colors.accentcolor || theme.colors.frame)) { + document.body.style.backgroundColor = + theme.colors.accentcolor || theme.colors.frame; + } else { + document.body.style.backgroundColor = "white"; + } + + if (theme.colors && theme.colors.toolbar) { + myElement.style.backgroundColor = theme.colors.toolbar; + } else { + myElement.style.backgroundColor = "#ebebeb"; + } + + if (theme.colors && theme.colors.toolbar_text) { + myElement.style.color = theme.colors.toolbar_text; + } else { + myElement.style.color = "black"; + } +} + +// Set the element style when the extension page loads +async function setInitialStyle() { + const theme = await browser.theme.getCurrent(); + setSidebarStyle(theme); +} +setInitialStyle(); + +// Watch for theme updates +browser.theme.onUpdated.addListener(async ({ theme, windowId }) => { + const sidebarWindow = await browser.windows.getCurrent(); + /* + Only update theme if it applies to the window the sidebar is in. + If a windowId is passed during an update, it means that the theme is applied to that specific window. + Otherwise, the theme is applied globally to all windows. + */ + if (!windowId || windowId == sidebarWindow.id) { + setSidebarStyle(theme); + } +});