Bug 430902 – Use new expand and collapse progressive disclosure controls. r=dao, ui-r=faaborg

browser/components/places/content/places.js

@@ -592,6 +592,9 @@ var PlacesOrganizer = {
      */
     var infoBox = document.getElementById("infoBox");
     var infoBoxExpander = document.getElementById("infoBoxExpander");
+#ifdef XP_WIN
+    var infoBoxExpanderLabel = document.getElementById("infoBoxExpanderLabel");
+#endif
     if (aNode.itemId != -1 &&
         ((PlacesUtils.nodeIsFolder(aNode) &&
           !PlacesUtils.nodeIsLivemarkContainer(aNode)) ||
@@ -600,12 +603,18 @@ var PlacesOrganizer = {
         infoBox.setAttribute("wasminimal", "true");
       infoBox.removeAttribute("minimal");
       infoBoxExpander.hidden = true;
+#ifdef XP_WIN
+      infoBoxExpanderLabel.hidden = true;
+#endif
     }
     else {
       if (infoBox.getAttribute("wasminimal") == "true")
         infoBox.setAttribute("minimal", "true");
       infoBox.removeAttribute("wasminimal");
       infoBoxExpander.hidden = false;
+#ifdef XP_WIN
+      infoBoxExpanderLabel.hidden = false;
+#endif
     }
   },
 
@@ -710,15 +719,30 @@ var PlacesOrganizer = {
   toggleAdditionalInfoFields: function PO_toggleAdditionalInfoFields() {
     var infoBox = document.getElementById("infoBox");
     var infoBoxExpander = document.getElementById("infoBoxExpander");
+#ifdef XP_WIN
+    var infoBoxExpanderLabel = document.getElementById("infoBoxExpanderLabel");
+#endif
     if (infoBox.getAttribute("minimal") == "true") {
       infoBox.removeAttribute("minimal");
+#ifdef XP_WIN
+      infoBoxExpanderLabel.value = infoBoxExpanderLabel.getAttribute("lesslabel");
+      infoBoxExpanderLabel.setAttribute("accesskey", infoBoxExpanderLabel.getAttribute("lessaccesskey"));
+      infoBoxExpander.className = "expander-up";
+#else
       infoBoxExpander.label = infoBoxExpander.getAttribute("lesslabel");
       infoBoxExpander.accessKey = infoBoxExpander.getAttribute("lessaccesskey");
+#endif
     }
     else {
       infoBox.setAttribute("minimal", "true");
+#ifdef XP_WIN
+      infoBoxExpanderLabel.value = infoBoxExpanderLabel.getAttribute("morelabel");
+      infoBoxExpanderLabel.setAttribute("accesskey", infoBoxExpanderLabel.getAttribute("moreaccesskey"));
+      infoBoxExpander.className = "expander-down";
+#else
       infoBoxExpander.label = infoBoxExpander.getAttribute("morelabel");
       infoBoxExpander.accessKey = infoBoxExpander.getAttribute("moreaccesskey");
+#endif
     }
   },
 

browser/components/places/content/places.xul

@@ -508,6 +508,20 @@
                   <vbox id="editBookmarkPanelContent"/>
                   <spacer flex="1"/>
                   <hbox>
+#ifdef XP_WIN
+                    <button type="image" id="infoBoxExpander"
+                            class="expander-down"
+                            oncommand="PlacesOrganizer.toggleAdditionalInfoFields();"
+                            observes="paneElementsBroadcaster"/>
+                    <label id="infoBoxExpanderLabel"
+                           lesslabel="&detailsPane.less.label;"
+                           lessaccesskey="&detailsPane.less.accesskey;"
+                           morelabel="&detailsPane.more.label;"
+                           moreaccesskey="&detailsPane.more.accesskey;"
+                           value="&detailsPane.more.label;"
+                           accesskey="&detailsPane.more.accesskey;"
+                           control="infoBoxExpander"/>
+#else
                     <button type="image" id="infoBoxExpander"
                             lesslabel="&detailsPane.less.label;"
                             lessaccesskey="&detailsPane.less.accesskey;"
@@ -517,6 +531,7 @@
                             accesskey="&detailsPane.more.accesskey;"
                             oncommand="PlacesOrganizer.toggleAdditionalInfoFields();"
                             observes="paneElementsBroadcaster"/>
+#endif
                     <spacer flex="1"/>
                   </hbox>
                 </vbox>

browser/themes/winstripe/browser/places/editBookmarkOverlay.css

@@ -58,20 +58,17 @@
   min-width: 0;
 }
 
+.expander-up > hbox,
+.expander-down > hbox {
+  padding: 0;
+}
+
 .expander-up {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+  list-style-image: url("chrome://global/skin/icons/collapse.png");
 }
 
 .expander-down {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
-}
-
-.expander-down:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-hov.gif");
-}
-
-.expander-up:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-hov.gif");
+  list-style-image: url("chrome://global/skin/icons/expand.png");
 }
 
 /**** name picker ****/

browser/themes/winstripe/browser/places/organizer.css

@@ -258,6 +258,7 @@
   -moz-border-bottom-colors: ThreeDHighlight ThreeDShadow;
   padding: 3px 3px 3px 0px;
 }
+%endif
 
 /**** expanders ****/
 
@@ -266,23 +267,24 @@
   min-width: 0;
 }
 
+.expander-up > hbox,
+.expander-down > hbox {
+  padding: 0;
+}
+
 .expander-up {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+  list-style-image: url("chrome://global/skin/icons/collapse.png");
 }
 
 .expander-down {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+  list-style-image: url("chrome://global/skin/icons/expand.png");
 }
 
-.expander-down:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-hov.gif");
+#infoBoxExpanderLabel {
+  margin: 0;
+  padding: 5px 0;
 }
 
-.expander-up:hover:active {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-hov.gif");
-}
-%endif
-
 #organizerScopeBar {
   -moz-appearance: toolbox;
   padding: 2px 0;