Australis Customizing Window

[whardman]

So, who knows how to get the new customize working with a custom theme? So far I have the customize window looking usable, but I can't customize anything (it appears to be in normal mode not customize mode) and can't exit from customize. I have picked up the browser.css changes, and the new panelUIOverlay.css. It seems strange to me that the core functionality seems broken by theme changes.

I noticed that things like gBrowserCustomize.toggle() doesn't exist.

Any help would be appreciated.

[trolly]

You may take a look here: viewtopic.php?f=48&t=2773133

[whardman]

I have looked at that thread and actually have CTR installed. The issue isn't getting the old look back, it is that I can't get my theme to work properly with the new customize dialog/page that came with Australis.

[trolly]

You can ask the author of CTR how he has done it.

[Aris]

@whardman:
Look into default themes css code and copy&paste it into your theme.

[whardman]

@whardman:
Look into default themes css code and copy&paste it into your theme.

I have gone through the mozilla-central theme code and have copied the panelUIOverlay.css, added anything with [customize-*], customizing, or customization in it, added everything from customizeMode.inc.css, and searched through to find anything else that might be relevant, but still can't get it to work.

After fixing the pre-processor information, it looks correct, but I still can't customize anything or exit out of customize mode. I wouldn't need to copy anything from the content styles, would I?

[patrickjdempsey]

Mozilla likes to put everything new and experimental in browser.css. Because that makes sense. That would be the first place I would look. Also, DOM Inspector still works in Nightly, although you have to invoke it via the menu now because they've broken the keyboard shortcut.

Are you actually a theme developer or are you a user looking to update a theme? Either way, I would recommend waiting until the dust settles and the behemoth lands on Aurora because I'm betting this is going to get changed right up until the merge. (and probably for several versions after)

[whardman]

Mozilla likes to put everything new and experimental in browser.css. Because that makes sense. That would be the first place I would look. Also, DOM Inspector still works in Nightly, although you have to invoke it via the menu now because they've broken the keyboard shortcut.

Nothing wrong with a 5000 line file. I use the DOM Inspector HEAVILY. Unfortunately it doesn't always work on some things.

Are you actually a theme developer or are you a user looking to update a theme? Either way, I would recommend waiting until the dust settles and the behemoth lands on Aurora because I'm betting this is going to get changed right up until the merge. (and probably for several versions after)

Sorta both. I have a personal theme that I maintain for myself. I know there will be changes, but if I can get 90% working now, that's 90% I don't have to do later. Each release has something that needs to be fixed, usually in the devtools.

It wasn't something that I was missing, it was something that got changed. No wonder I couldn't find it.

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar[tabsontop="true"],
  #navigator-toolbox[tabsontop="false"] > #nav-bar,
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }

Needs to be changed to:

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#addon-bar):-moz-lwtheme {
    -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
  }

Also, the only important line that I found was:

Code: Select all

#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
  padding: 0 2em 2em !important;
}

[Frank Lion]

It wasn't something that I was missing, it was something that got changed. No wonder I couldn't find it.

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar[tabsontop="true"],
  #navigator-toolbox[tabsontop="false"] > #nav-bar,
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }

Needs to be changed to:

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#addon-bar):-moz-lwtheme {
    -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
  }

No change required for me. I still use the original binding shown above and my Customize UI works fine.

Also, the only important line that I found was:

Code: Select all

#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
  padding: 0 2em 2em !important;
}

That is just a line amongst the rest of the default Customize UI code at the end of browser.css, which you (should have) added with all the rest to your browser.css. It doesn't need changing.

[whardman]

It wasn't something that I was missing, it was something that got changed. No wonder I couldn't find it.

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar[tabsontop="true"],
  #navigator-toolbox[tabsontop="false"] > #nav-bar,
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  }

Needs to be changed to:

Code: Select all

  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar,
  #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#addon-bar):-moz-lwtheme {
    -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
  }

No change required for me. I still use the original binding shown above and my Customize UI works fine.

Hmmm. If I don't change/remove that section, it breaks the customize for me. Maybe it is one of the selectors that is different.

Also, the only important line that I found was:

Code: Select all

#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
  padding: 0 2em 2em !important;
}

That is just a line amongst the rest of the default Customize UI code at the end of browser.css, which you (should have) added with all the rest to your browser.css. It doesn't need changing.

What I meant there, was that I can remove all of the Customize UI code and it still works, looks ugly, but works. If I remove that line it breaks all-together.

Theme styles always seem to act and break in weird ways for me. Oh well, I have everything working and it almost looks exactly like before. Now I just have to fix the devtools that got broken in 26.0.

[Frank Lion]

Oh well, I have everything working and it almost looks exactly like before.

Well, that's good. But, I didn't want other people to get the impression that everyone has to make those same code changes for this new Customize stuff to work, that's all.

[akayser]

Also, the only important line that I found was:

Code: Select all
#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
padding: 0 2em 2em !important;
}

What is happening is that the customization panel is relying on the transition on the tab-view-deck to happen, waiting for the transition-end event.
I have changed the padding to 1px and added a margin -1px and give it a transition time of 1ms, like so:

Code: Select all

#tab-view-deck{
   transition-property:padding,margin!important;
   transition-duration:1ms!important}
#main-window:-moz-any([customize-entering],[customize-entered])>#tab-view-deck{
   padding-bottom:1px;
   margin-bottom:-1px}