MozillaZine

Australis Customizing Window

Discuss application theming and theme development.
whardman
 
Posts: 17
Joined: July 8th, 2013, 5:08 am

Post Posted November 21st, 2013, 2:44 pm

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
Moderator

User avatar
 
Posts: 39891
Joined: August 22nd, 2005, 7:25 am

Post Posted November 22nd, 2013, 4:00 am

You may take a look here: viewtopic.php?f=48&t=2773133
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

whardman
 
Posts: 17
Joined: July 8th, 2013, 5:08 am

Post Posted November 22nd, 2013, 9:16 am

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
Moderator

User avatar
 
Posts: 39891
Joined: August 22nd, 2005, 7:25 am

Post Posted November 22nd, 2013, 9:34 am

You can ask the author of CTR how he has done it.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

Aris

User avatar
 
Posts: 3130
Joined: February 27th, 2011, 10:14 am

Post Posted November 22nd, 2013, 2:06 pm

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

whardman
 
Posts: 17
Joined: July 8th, 2013, 5:08 am

Post Posted November 25th, 2013, 11:48 am

Aris wrote:@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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 25th, 2013, 12:16 pm

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)
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

whardman
 
Posts: 17
Joined: July 8th, 2013, 5:08 am

Post Posted November 26th, 2013, 8:49 am

patrickjdempsey wrote: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. :roll: I use the DOM Inspector HEAVILY. Unfortunately it doesn't always work on some things.

patrickjdempsey wrote: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

User avatar
 
Posts: 19844
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 26th, 2013, 9:37 am

whardman wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

whardman
 
Posts: 17
Joined: July 8th, 2013, 5:08 am

Post Posted November 26th, 2013, 9:48 am

Frank Lion wrote:
whardman wrote: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.

Frank Lion wrote:
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

User avatar
 
Posts: 19844
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 26th, 2013, 9:57 am

whardman wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

akayser

User avatar
 
Posts: 299
Joined: August 25th, 2010, 12:44 am

Post Posted December 9th, 2013, 12:07 pm

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}
Creator of the LittleFox, LittleBird, MicroFox, MicroBird, Nautipolis, Walnut, Walnut2, Bricks and Metal themes for Firefox and Thunderbird.
Visit https://addons.mozilla.org/en-US/firefox/addon/123/developers. Mozilla contributor since October 1999 (Mozilla M10).

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest