{"id":8996,"date":"2021-04-19T08:08:49","date_gmt":"2021-04-19T15:08:49","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=8996"},"modified":"2021-04-19T08:08:49","modified_gmt":"2021-04-19T15:08:49","slug":"changes-to-themeable-areas-of-firefox-in-version-89","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/","title":{"rendered":"Changes to themeable areas of Firefox in version 89"},"content":{"rendered":"<p>Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Since some of the changes will affect themeable areas of the browser, we wanted to give theme artists a preview of what to expect as the appearance of their themes may change when applied to version 89.<\/p>\n<h2>Tabs appearance<\/h2>\n<ul>\n<li aria-level=\"1\">The property <code>tab_background_separator<\/code>, which controls the appearance of the vertical lines that separate tabs, will no longer be supported.<\/li>\n<li aria-level=\"1\">Currently, the <code>tab_line<\/code> property can set the color of an active tab\u2019s thick top border. In Firefox 89, this property will set a color for all borders of an active tab, and the borders will be thinner.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-8999 size-large\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89-e1618591796324-600x264.png\" alt=\"\" width=\"600\" height=\"264\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89-e1618591796324-600x264.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89-e1618591796324-252x111.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89-e1618591796324-768x337.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/tab_line-Firefox-89-e1618591796324.png 1152w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>URL and toolbar<\/h2>\n<ul>\n<li>The property <code>toolbar_field_separator<\/code>, which controls the color of the vertical line that separates the URL bar from the three-dot \u201cmeatball menu,\u201d will no longer be supported.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_vertical_seperator-Firefox-89.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-9001 size-large\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_vertical_seperator-Firefox-89-e1618591855664-600x277.png\" alt=\"\" width=\"600\" height=\"277\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_vertical_seperator-Firefox-89-e1618591855664-600x277.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_vertical_seperator-Firefox-89-e1618591855664-252x116.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_vertical_seperator-Firefox-89-e1618591855664.png 719w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<ul>\n<li>The property <code>toolbar_vertical_separator<\/code>, which controls the vertical lines near the three-line \u201chamburger menu\u201d and the line separating items in the bookmarks toolbar, will no longer appear next to the hamburger menu. You can still use this property to control the separators in the bookmarks toolbar.\u00a0 <i>(Note: users will need to enable the separator by right clicking on the bookmarks toolbar and selecting \u201cAdd Separator.\u201d)<\/i><\/li>\n<\/ul>\n<p><a href=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-9000 size-large\" src=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator-e1618591978744-600x279.png\" alt=\"\" width=\"600\" height=\"279\" srcset=\"https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator-e1618591978744-600x279.png 600w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator-e1618591978744-252x117.png 252w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator-e1618591978744-768x357.png 768w, https:\/\/blog.mozilla.org\/addons\/files\/2021\/04\/toolbar_field_seperator-e1618591978744.png 1152w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>You can use the <a href=\"https:\/\/www.mozilla.org\/firefox\/channel\/desktop\/#nightly\">Nightly<\/a> pre-release channel to start testing how your themes will look with Firefox 89. If you\u2019d like to get more involved testing other changes planned for this release, please check out our <a href=\"https:\/\/community.mozilla.org\/campaigns\/firefox-foxfooding-campaign\/\">foxfooding campaign<\/a>, which runs until May 3, 2021.<\/p>\n<p>Firefox 89 is currently set available on the <a href=\"https:\/\/www.mozilla.org\/firefox\/channel\/desktop\/#beta\">Beta<\/a> pre-release channel by April 23, 2021, and released on June 1, 2021.<\/p>\n<p>As always, please post on our <a href=\"https:\/\/discourse.mozilla.org\/c\/add-ons\/35\">community forum<\/a> if there are any questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Since some of the changes will affect themeable areas of the browser, we wanted to &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/\">Read more<\/a><\/p>\n","protected":false},"author":1405,"featured_media":8631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121,227,551],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Changes to themeable areas of Firefox in version 89 - Mozilla Add-ons Community Blog<\/title>\n<meta name=\"description\" content=\"Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Here&#039;s a preview of how these changes will affect themes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caitlin Neiman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/\",\"name\":\"Changes to themeable areas of Firefox in version 89 - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"datePublished\":\"2021-04-19T15:08:49+00:00\",\"dateModified\":\"2021-04-19T15:08:49+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/d42e525583ec49a90da7806934fd533f\"},\"description\":\"Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Here's a preview of how these changes will affect themes.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changes to themeable areas of Firefox in version 89\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/d42e525583ec49a90da7806934fd533f\",\"name\":\"Caitlin Neiman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/022ba856a87c8f40739b7ef2fdcdf33c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/022ba856a87c8f40739b7ef2fdcdf33c?s=96&d=mm&r=g\",\"caption\":\"Caitlin Neiman\"},\"description\":\"Add-ons Community Manager at Mozilla.\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/cneimanmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Changes to themeable areas of Firefox in version 89 - Mozilla Add-ons Community Blog","description":"Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Here's a preview of how these changes will affect themes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/","twitter_misc":{"Written by":"Caitlin Neiman","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/","url":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/","name":"Changes to themeable areas of Firefox in version 89 - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","datePublished":"2021-04-19T15:08:49+00:00","dateModified":"2021-04-19T15:08:49+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/d42e525583ec49a90da7806934fd533f"},"description":"Firefox\u2019s visual appearance will be updated in version 89 to provide a cleaner, modernized interface. Here's a preview of how these changes will affect themes.","breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2019\/02\/pexels-photo-9985871.jpeg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2021\/04\/19\/changes-to-themeable-areas-of-firefox-in-version-89\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Changes to themeable areas of Firefox in version 89"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/d42e525583ec49a90da7806934fd533f","name":"Caitlin Neiman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/022ba856a87c8f40739b7ef2fdcdf33c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/022ba856a87c8f40739b7ef2fdcdf33c?s=96&d=mm&r=g","caption":"Caitlin Neiman"},"description":"Add-ons Community Manager at Mozilla.","url":"https:\/\/blog.mozilla.org\/addons\/author\/cneimanmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8996"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/1405"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=8996"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/8996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media\/8631"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=8996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=8996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=8996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}