170006 - better theme manager graphics

toolkit/mozapps/extensions/content/extensions.js

@@ -86,6 +86,19 @@ function Startup()
   gExtensionsView.setAttribute("ref", gDSRoot);
   gExtensionsView.focus();
   
+  var pref = Components.classes["@mozilla.org/preferences-service;1"]
+                       .getService(Components.interfaces.nsIPrefBranch);
+  if (!isExtensions) {
+    gExtensionsView.addEventListener("richview-select", onThemeSelect, false);
+    try {
+      gCurrentTheme = pref.getCharPref(PREF_GENERAL_SKINS_SELECTEDSKIN);
+    }
+    catch (e) { gCurrentTheme = "classic/1.0"; } 
+    
+    var useThemeButton = document.getElementById("useThemeButton");
+    useThemeButton.hidden = false;
+  }
+  
   // Restore the last-selected extension
   var lastSelected = gExtensionsView.getAttribute("last-selected");
   if (lastSelected != "")
@@ -100,8 +113,6 @@ function Startup()
   
   gExtensionsViewController.onCommandUpdate(); 
   
-  var pref = Components.classes["@mozilla.org/preferences-service;1"]
-                       .getService(Components.interfaces.nsIPrefBranch);
   gGetMoreURL = pref.getComplexValue(isExtensions ? PREF_EXTENSIONS_GETMOREEXTENSIONSURL 
                                                   : PREF_EXTENSIONS_GETMORETHEMESURL, 
                                      Components.interfaces.nsIPrefLocalizedString).data;
@@ -115,14 +126,13 @@ function Startup()
     var themePreviewArea = document.getElementById("themePreviewArea");
     themePreviewArea.hidden = false;
     gExtensionsView.removeAttribute("flex");
+  }
   
+  // Set Initial Size
   var win = document.documentElement;
   if (!win.hasAttribute("width") || !win.hasAttribute("height")) {
-      win.setAttribute("width", 500);
+    win.setAttribute("width", isExtensions ? 400 : 500);
-      win.setAttribute("width", 380);
+    win.setAttribute("height", isExtensions ? 300 : 380);
-      
-      gExtensionsView.addEventListener("richview-select", onThemeSelect, false);
-    }
   }
 }
 
@@ -139,38 +149,29 @@ function onViewDoubleClick()
     gExtensionsViewController.doCommand('cmd_options');
     break;
   case "themes":
-    if (!gExtensionsView.selected)
+    gExtensionsViewController.doCommand('cmd_useTheme');
-      return;
-    var cr = Components.classes["@mozilla.org/chrome/chrome-registry;1"]
-                       .getService(Components.interfaces.nsIXULChromeRegistry);
-    var pref = Components.classes["@mozilla.org/preferences-service;1"]
-                         .getService(Components.interfaces.nsIPrefBranch);
-    var internalName = gExtensionsView.selected.getAttribute("internalName");
-    var inUse = cr.isSkinSelected(internalName, true);
-    if (inUse == Components.interfaces.nsIChromeRegistry.FULL)
-      return;
-      
-    pref.setCharPref(PREF_GENERAL_SKINS_SELECTEDSKIN, internalName);
-    cr.selectSkin(internalName, true);
-    cr.refreshSkins();
     break;
   }
 }
 
 function onThemeSelect(aEvent)
 {
+  if (gWindowState != "themes")
+    return;
+
   var previewImageDeck = document.getElementById("previewImageDeck");
   if (!gExtensionsView.selected) {
-    previewImageDeck.setAttribute("index", "0");
+    previewImageDeck.setAttribute("selectedIndex", "0");
     return;
   }
   var url = gExtensionsView.selected.getAttribute("previewImage");
   if (url) {
-    previewImageDeck.setAttribute("index", "2");
+    previewImageDeck.setAttribute("selectedIndex", "2");
+    var previewImage = document.getElementById("previewImage");
     previewImage.setAttribute("src", url);
   }
   else
-    previewImageDeck.setAttribute("index", "1");
+    previewImageDeck.setAttribute("selectedIndex", "1");
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -179,8 +180,8 @@ var gExtensionContextMenus = ["menuitem_options", "menuitem_homepage", "menuitem
                               "menuseparator_1", "menuitem_uninstall", "menuitem_update",
                               "menuitem_enable", "menuitem_disable", "menuseparator_2", 
                               "menuitem_moveTop", "menuitem_moveUp", "menuitem_moveDn"];
-var gThemeContextMenus = ["menuitem_homepage", "menuitem_about", "menuseparator_1", 
+var gThemeContextMenus = ["menuitem_useTheme", "menuitem_homepage", "menuitem_about", 
-                          "menuitem_uninstall", "menuitem_update"];
+                          "menuseparator_1", "menuitem_uninstall", "menuitem_update"];
 
 function buildContextMenu(aEvent)
 {
@@ -332,6 +333,8 @@ var gExtensionsViewController = {
     switch (aCommand) {
     case "cmd_close":
       return true;
+    case "cmd_useTheme":
+      return selectedItem && gCurrentTheme != selectedItem.getAttribute("internalName");
     case "cmd_options":
       return selectedItem && !selectedItem.disabled && selectedItem.getAttribute("optionsURL") != "";
     case "cmd_about":
@@ -359,6 +362,7 @@ var gExtensionsViewController = {
 
   doCommand: function (aCommand)
   {
+    if (this.isCommandEnabled(aCommand))
       this.commands[aCommand]();
   },  
   
@@ -380,6 +384,22 @@ var gExtensionsViewController = {
       closeWindow(true);
     },  
   
+    cmd_useTheme: function ()
+    {
+      var cr = Components.classes["@mozilla.org/chrome/chrome-registry;1"]
+                        .getService(Components.interfaces.nsIXULChromeRegistry);
+      var pref = Components.classes["@mozilla.org/preferences-service;1"]
+                          .getService(Components.interfaces.nsIPrefBranch);
+      gCurrentTheme = gExtensionsView.selected.getAttribute("internalName");
+      var inUse = cr.isSkinSelected(gCurrentTheme , true);
+      if (inUse == Components.interfaces.nsIChromeRegistry.FULL)
+        return;
+        
+      pref.setCharPref(PREF_GENERAL_SKINS_SELECTEDSKIN, gCurrentTheme);
+      cr.selectSkin(gCurrentTheme, true);
+      cr.refreshSkins();
+    },
+      
     cmd_options: function ()
     {
       if (!gExtensionsView.selected) return;

toolkit/mozapps/extensions/content/extensions.xul

@@ -41,6 +41,8 @@
 <?xml-stylesheet href="chrome://mozapps/skin/extensions/extensions.css"?>
 
 <!DOCTYPE window [
+<!ENTITY % brandDTD SYSTEM "chrome://global/locale/brand.dtd">
+%brandDTD;
 <!ENTITY % extensionsDTD SYSTEM "chrome://mozapps/locale/extensions/extensions.dtd">
 %extensionsDTD;
 ]>
@@ -49,7 +51,7 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         id="extensionsManager" windowtype="Extension:Manager"
         orient="vertical" title="&extensions.title;" statictitle="&extensions.title;"
-        width="400" height="300" screenX="10" screenY="10"
+        screenX="10" screenY="10"
         persist="width height screenX screenY sizeMode"
         onload="Startup();" onunload="Shutdown();"
         onclose="return closeWindow(false);">
@@ -89,9 +91,12 @@
     <command id="cmd_movetop"/>
     <command id="cmd_moveup"/>
     <command id="cmd_movedn"/>
+    <command id="cmd_useTheme"/>
   </commandset>
   
   <vbox id="contextMenuPalette" hidden="true">
+    <menuitem id="menuitem_useTheme" default="true" command="cmd_useTheme"
+              label="&cmd.useTheme.label;" accesskey="&cmd.useTheme.accesskey;"/>
     <menuitem id="menuitem_options" default="true" command="cmd_options"
               label="&cmd.options.label;" accesskey="&cmd.options.accesskey;"/>
     <menuitem id="menuitem_homepage" command="cmd_homepage"
@@ -201,7 +206,7 @@
         </rule>
       </template>
     </view> 
-    <vbox id="themePreviewArea" class="themePreviewArea" hidden="true" flex="5">
+    <vbox flex="5" id="themePreviewArea" class="themePreviewArea" hidden="true">
       <deck id="previewImageDeck" flex="1">
         <vbox id="noThemeSelected" pack="center" align="center">
           <label class="previewText">&previewNoThemeSelected.label;</label>
@@ -209,22 +214,30 @@
         <vbox id="noPreviewImage" pack="center" align="center">
           <label class="previewText">&previewNoPreviewImage.label;</label>
         </vbox>
-        <vbox id="previewImageContainer" pack="center" align="center"
+        <vbox id="previewImageContainer" align="center" pack="center"
               style="overflow: auto;">
+          <description>
             <image id="previewImage"/>
+          </description>
         </vbox>
       </deck>
     </vbox>
   </hbox>
   <hbox>
     <hbox id="commandBar" flex="1" align="center">
+      <hbox>
         <button id="uninstallButton" 
                 label="&cmd.uninstall.label;" accesskey="&cmd.uninstall.accesskey;" tooltiptext="&cmd.uninstall.tooltip;" 
                 command="cmd_uninstall"/>
-      <separator id="commandBarSeparator"/>              
+        <separator class="commandBarSeparator"/>              
         <button id="updateButton" 
                 label="&cmd.update.label;" accesskey="&cmd.update.accesskey;" tooltiptext="&cmd.update.tooltip;"
                 command="cmd_update"/>
+        <separator class="commandBarSeparator"/>              
+        <button id="useThemeButton" hidden="true"
+                label="&cmd.useTheme.label;" accesskey="&cmd.useTheme.accesskey;" tooltiptext="&cmd.useTheme.tooltip;"
+                command="cmd_useTheme"/>
+      </hbox>
       <label id="getMore" onclick="openURL(gGetMoreURL);"
              valuethemes="&getMoreThemes.label;"
              valueextensions="&getMoreExtensions.label;"

toolkit/mozapps/extensions/locale/extensions.dtd

@@ -11,6 +11,9 @@
 <!ENTITY cmd.update.label                 "Update">
 <!ENTITY cmd.update.accesskey             "U">
 <!ENTITY cmd.update.tooltip               "Checks for Updates to your Extensions">
+<!ENTITY cmd.useTheme.label               " Use Theme">
+<!ENTITY cmd.useTheme.accesskey           "U">
+<!ENTITY cmd.useTheme.tooltip             "Changes &brandShortName;'s theme.">
 
 <!-- Context Menu Options: Extension -->
 <!ENTITY cmd.options.label                "Options">
@@ -50,5 +53,5 @@
 <!ENTITY getMoreThemes.tooltip            "Get More Themes from update.mozilla.org">
 
 <!ENTITY previewNoThemeSelected.label     "No Theme Selected">
-<!ENTITY previewNoPreviewImage.label      "This Theme does not have a Preview Image.">
+<!ENTITY previewNoPreviewImage.label      "This Theme does not have a Preview Image">
 

toolkit/mozapps/extensions/skin/extensions.css

@@ -27,6 +27,12 @@
   list-style-image: url("chrome://mozapps/skin/extensions/placeholder.gif");
 }
 
+#useThemeButton {
+  margin: 0px;
+  -moz-user-focus: ignore;
+  list-style-image: url("chrome://mozapps/skin/extensions/placeholder.gif");
+}
+
 #uninstallButton .button-icon, #updateButton .button-icon {
   margin: 0px 5px 0px 0px !important;
 }
@@ -35,7 +41,7 @@
   list-style-image: url("chrome://mozapps/skin/extensions/placeholder.gif");
 }
 
-#commandBarSeparator {
+.commandBarSeparator {
   margin-left: 5px;
 }
 
@@ -102,6 +108,7 @@ extension[disabled="true"] .extension-icon {
   font-size: larger;
   font-weight: bold;
   color: ThreeDShadow;
+  text-align: center;
 }
 
 extension[itemType="theme"] {
@@ -112,3 +119,8 @@ extension[itemType="theme"] .extension-icon {
   margin-right: 3px;
 }
 
+.themePreviewArea {
+  -moz-appearance: listbox;
+  margin: 10px 10px 5px 5px;
+}
+

toolkit/mozapps/shared/content/richview.xml

@@ -71,6 +71,12 @@
           var eventType = "richview-" + aEventType;
           e.initEvent(eventType, false, true);
           this.dispatchEvent(e);
+          
+          var handler = this.getAttribute("onrichview-" + aEventType);
+          if (handler != "") {
+            var fn = new Function("event", handler);
+            fn(e);
+          }
           document.commandDispatcher.updateCommands(eventType);
         ]]>
         </body>