Use -moz-image-region, compine 14 PNG files to 3 PNG files.

littlebtc · May 19, 2011 · 7cb83e1 · 7cb83e1
1 parent 3a6de29
commit 7cb83e1
Show file tree

Hide file tree

Showing 24 changed files with 42 additions and 21 deletions.
diff --git a/build.sh b/build.sh
@@ -9,7 +9,6 @@ echo "Generating directories..."
 mkdir build
 mkdir build/content
 mkdir build/skin
-mkdir build/skin/tools
 mkdir build/components
 mkdir build/modules
 mkdir build/defaults
@@ -22,7 +21,6 @@ echo "Copy files..."
 cp install.rdf chrome.manifest LICENSE.md build/
 cp content/*.js content/*.xul content/*.xml content/*.swf build/content/
 cp skin/*.css skin/*.png build/skin/
-cp skin/tools/*.png build/skin/tools/
 cp components/*.js build/components/
 cp modules/*.jsm build/modules/
 cp defaults/preferences/*.js build/defaults/preferences/

diff --git a/content/firefoxOverlay1.9.xul b/content/firefoxOverlay1.9.xul
@@ -37,7 +37,7 @@
     </hbox>
     <statusbarpanel id="nicofoxStatusbarContainer" onclick="event.stopPropagation();  document.getElementById('nicofox-library').hidden = false; document.getElementById('nicofox-library').openPopup(this, 'before_end', 0, 0, false, false);">
        <!-- For rein skin compatibility -->
-       <image id="nicofox-icon" src="chrome://nicofox/skin/logo_16.png"/> 
+       <image id="nicofox-icon" /> 
        <label id="nicofoxStatusbarLabel" hidden="true" />
     </statusbarpanel>
   </statusbar>

diff --git a/content/options.xul b/content/options.xul
@@ -2,6 +2,7 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://mozapps/content/preferences/preferences.css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
+<?xml-stylesheet href="chrome://nicofox/skin/smilefox.css" type="text/css"?>
 <!DOCTYPE prefwindow [
 <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
 %brandDTD;
@@ -11,7 +12,7 @@
 <prefwindow id="nicofoxPreferences" xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="&prefwindow.title;" width="600" style="height: 45em;">
-  <prefpane id="pane1" label="&nicomonkey;" onpaneload="updatePanel1();" image="chrome://nicofox/skin/nicofox_content.png">
+  <prefpane id="pane1" label="&nicomonkey;" onpaneload="updatePanel1();">
   <script type="application/x-javascript" src="chrome://nicofox/content/options_panel1.js" />
     <preferences>
       <preference id="pref-nicomonkey.sound_converter" name="extensions.nicofox.nicomonkey.sound_converter" type="string"/>
@@ -29,7 +30,7 @@
       </menulist>
     </hbox>
   </prefpane>
-  <prefpane id="pane2" label="&downloader;" onpaneload="updatePanel2();" image="chrome://nicofox/skin/nicofox_downloader.png">
+  <prefpane id="pane2" label="&downloader;" onpaneload="updatePanel2();">
   <script type="application/x-javascript" src="chrome://nicofox/content/options_panel2.js" />
     <preferences>
       <preference id="pref-save_path" name="extensions.nicofox.save_path" type="file"/> 
@@ -121,7 +122,7 @@
      </hbox>
      </groupbox>
   </prefpane>
-  <prefpane id="pane3" label="&video_player;" onpaneload="updatePanel3();" image="chrome://nicofox/skin/nicofox_player.png">
+  <prefpane id="pane3" label="&video_player;" onpaneload="updatePanel3();">
   <script type="application/x-javascript" src="chrome://nicofox/content/options_panel3.js" />
     <preferences>
       <preference id="pref-external_video_player" name="extensions.nicofox.external_video_player" type="bool" onchange="updateVideoPlayer();"/>

diff --git a/content/smilefoxPanel.xul b/content/smilefoxPanel.xul
@@ -20,13 +20,13 @@
           <description flex="1">When you enter the video page, download button, global sites and third-party tools will be displayed here.</description>
           <label value="Go to Nico Nico Douga in the specific region:" />
           <hbox id="nicofox-not-watching-toolbar">
-            <image src="chrome://nicofox/skin/tools/jp.png" class="smilefoxToolItem"
+            <image style="-moz-image-region: rect(0px 16px 11px 0px);" class="smilefoxToolItem"
                    onclick="nicofox.panel.videoTools.goSite(event, 'www');" />
-            <image src="chrome://nicofox/skin/tools/tw.png" class="smilefoxToolItem"
+            <image style="-moz-image-region: rect(0px 32px 11px 16px);" class="smilefoxToolItem"
                    onclick="nicofox.panel.videoTools.goSite(event, 'tw');" />
-            <image src="chrome://nicofox/skin/tools/es.png" class="smilefoxToolItem"
+            <image style="-moz-image-region: rect(0px 48px 11px 32px);" class="smilefoxToolItem"
                    onclick="nicofox.panel.videoTools.goSite(event, 'es');" />
-            <image src="chrome://nicofox/skin/tools/de.png" class="smilefoxToolItem"
+            <image style="-moz-image-region: rect(0px 64px 11px 48px);" class="smilefoxToolItem"
                    onclick="nicofox.panel.videoTools.goSite(event, 'de');" />
           </hbox>
           <description>Below are your recently download items.</description>
@@ -43,7 +43,7 @@
             <vbox flex="1">
               <label id="nicofox-watching-title" crop="end" />
               <hbox>
-                <button id="nicofox-watching-download" label="Download" image="chrome://nicofox/skin/tools/download.png"
+                <button id="nicofox-watching-download" label="Download" style="list-style-image: url('chrome://nicofox/skin/toolbar_sprite.png'); -moz-image-region: rect(11px 60px 23px 48px);"
                         oncommand="nicofox.panel.videoTools.download();"/>
                 <!--<button id="nicofox-watching-add-tags" label="Add tags..." />-->
               </hbox>
@@ -55,25 +55,25 @@
                 <rows>
                   <row>
                     <label value="This Video Worldwide:" />
-                    <hbox>
-                      <image src="chrome://nicofox/skin/tools/jp.png" class="smilefoxToolItem"
+                    <hbox align="center">
+                      <image style="-moz-image-region: rect(0px 16px 11px 0px);" class="smilefoxToolItem"
                              onclick="nicofox.panel.videoTools.goSite(event, 'www');" />
-                      <image src="chrome://nicofox/skin/tools/tw.png" class="smilefoxToolItem"
+                      <image style="-moz-image-region: rect(0px 32px 11px 16px);" class="smilefoxToolItem"
                              onclick="nicofox.panel.videoTools.goSite(event, 'tw');" />
-                      <image src="chrome://nicofox/skin/tools/es.png" class="smilefoxToolItem"
+                      <image style="-moz-image-region: rect(0px 48px 11px 32px);" class="smilefoxToolItem"
                              onclick="nicofox.panel.videoTools.goSite(event, 'es');" />
-                      <image src="chrome://nicofox/skin/tools/de.png" class="smilefoxToolItem"
+                      <image style="-moz-image-region: rect(0px 64px 11px 48px);" class="smilefoxToolItem"
                              onclick="nicofox.panel.videoTools.goSite(event, 'de');" />
                    </hbox>
                   </row>
                   <row>
                     <label value="Third-party Tools:" />
                     <hbox>
-                     <image src="chrome://nicofox/skin/tools/music.png" class="smilefoxToolItem"
+                     <image style="-moz-image-region: rect(11px 16px 27px 0px);" class="smilefoxToolItem"
                             onclick="nicofox.panel.videoTools.goThridPartyToolSite(event, 'sound');" />
-                     <image src="chrome://nicofox/skin/tools/chart.png" class="smilefoxToolItem"
+                     <image style="-moz-image-region: rect(11px 32px 27px 16px);" class="smilefoxToolItem"
                             onclick="nicofox.panel.videoTools.goThridPartyToolSite(event, 'chart');" />
-                     <image src="chrome://nicofox/skin/tools/comment.png" class="smilefoxToolItem" id="nicofox-watching-comment-tool"
+                     <image style="-moz-image-region: rect(11px 48px 27px 32px);" class="smilefoxToolItem" id="nicofox-watching-comment-tool"
                             onclick="nicofox.panel.videoTools.goThridPartyToolSite(event, 'comment');" />
                    </hbox>
                  </row>

diff --git a/skin/logo_16.png b/skin/logo_16.png
diff --git a/skin/logo_16_mac.png b/skin/logo_16_mac.png
diff --git a/skin/logo_16_sprite.png b/skin/logo_16_sprite.png
diff --git a/skin/logo_16_win.png b/skin/logo_16_win.png
diff --git a/skin/nicofox_content.png b/skin/nicofox_content.png
diff --git a/skin/nicofox_downloader.png b/skin/nicofox_downloader.png
diff --git a/skin/nicofox_player.png b/skin/nicofox_player.png
diff --git a/skin/options_sprite.png b/skin/options_sprite.png
diff --git a/skin/smilefox.css b/skin/smilefox.css
@@ -24,6 +24,11 @@ richlistitem[type="smilefox"]:not([selected="true"]):nth-child(odd) {
 richlistitem[type="smilefox"][sfstatus="7"] {
   -moz-binding: url("chrome://nicofox/content/smilefoxPanel.xml#smilefox-download-downloading");
 }
+#nicofox-icon {
+  list-style-image: url("chrome://nicofox/skin/logo_16_sprite.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
 #nicofox-library {
   list-style-image: none;
   background: white;
@@ -51,6 +56,7 @@ richlistitem[type="smilefox"][sfstatus="7"] {
 .smilefoxToolItem {
   margin: 3px;
   cursor: pointer;
+  list-style-image: url("chrome://nicofox/skin/toolbar_sprite.png");
 }
 
 .smilefoxDownloadThumbnail {
@@ -69,3 +75,17 @@ richlistitem[type="smilefox"][sfstatus="7"] {
   background: InfoBackground;
   color: InfoText;
 }
+
+radio[pane] {
+  list-style-image: url(chrome://nicofox/skin/options_sprite.png);
+}
+
+radio[pane=pane1] {
+  -moz-image-region: rect(0px 32px 32px 0px);
+}
+radio[pane=pane2] {
+  -moz-image-region: rect(0px 64px 32px 32px);
+}
+radio[pane=pane3] {
+  -moz-image-region: rect(0px 96px 32px 64px);
+}
diff --git a/skin/toolbar.css b/skin/toolbar.css
@@ -2,5 +2,6 @@
 
 #nicofox-toolbar-button {
   -moz-box-orient: horizontal;
-  list-style-image: url("chrome://nicofox/skin/logo_16_win.png");
+  list-style-image: url("chrome://nicofox/skin/logo_16_sprite.png");
+  -moz-image-region: rect(0px 48px 16px 32px);
 }
diff --git a/skin/toolbarMac.css b/skin/toolbarMac.css
@@ -2,5 +2,6 @@
 
 #nicofox-toolbar-button {
   -moz-box-orient: horizontal;
-  list-style-image: url("chrome://nicofox/skin/logo_16_mac.png");
+  list-style-image: url("chrome://nicofox/skin/logo_16_sprite.png");
+  -moz-image-region: rect(0px 48px 16px 32px);
 }
diff --git a/skin/toolbar_sprite.png b/skin/toolbar_sprite.png
diff --git a/skin/tools/chart.png b/skin/tools/chart.png
diff --git a/skin/tools/comment.png b/skin/tools/comment.png
diff --git a/skin/tools/de.png b/skin/tools/de.png
diff --git a/skin/tools/download.png b/skin/tools/download.png
diff --git a/skin/tools/es.png b/skin/tools/es.png
diff --git a/skin/tools/jp.png b/skin/tools/jp.png
diff --git a/skin/tools/music.png b/skin/tools/music.png
diff --git a/skin/tools/tw.png b/skin/tools/tw.png