Commit 6d551197 authored by Mike Conley's avatar Mike Conley
Browse files

Bug 1823495 - Bring the panel-list dropdown in the new Migration Wizard closer... 

Bug 1823495 - Bring the panel-list dropdown in the new Migration Wizard closer to the spec. r=kpatenio

Some of this styling requires us to hack around with inline styles from JS since
the <panel-list>, <panel-item>'s and <xul:panel> are slotted. Bug 1823489 has been
filed to investigate not using slotted items to make it easier to style using the
migration-wizard.css stylesheet instead.

Differential Revision: https://phabricator.services.mozilla.com/D173064
parent 65fd7ca9

browser/components/migration/content/migration-wizard.mjs

+10 −0
Original line number Diff line number Diff line
@@ -336,6 +336,16 @@ export class MigrationWizard extends HTMLElement { 
      opt.displayName = migrator.displayName;

      opt.resourceTypes = migrator.resourceTypes;



      // Bug 1823489 - since the panel-list and panel-items are slotted, we

      // cannot style them directly from migration-wizard.css. We use inline

      // styles for now to achieve the desired appearance, but bug 1823489

      // will investigate having MigrationWizard own the <xul:panel>,

      // <panel-list> and <panel-item>'s so that styling can be done in the

      // stylesheet instead.

      let button = opt.shadowRoot.querySelector("button");

      button.style.minHeight = "40px";

      button.style.backgroundImage = `url("chrome://global/skin/icons/defaultFavicon.svg")`;



      if (migrator.profile) {

        document.l10n.setAttributes(

          opt,

browser/themes/shared/migration/migration-wizard.css

+10 −0
Original line number Diff line number Diff line
@@ -115,6 +115,16 @@ button { 
  display: none;

}



/**

 * Until we address bug 1823489, it's not that easy to apply styles on

 * the panel-list. We work around this by setting the CSS variable for

 * the border instead.

 */

slot::slotted(panel-list),

slot::slotted(panel) {

  --in-content-box-border-color: transparent;

}



div[name="page-selection"]:not([show-import-all]) #select-all,

div[name="page-selection"][show-import-all][single-item] #select-all,

div[name="page-selection"]:not([show-import-all]) summary {