#46613 - new colorpicker buttons in prefs, r=nbhatla

2025-03-04 15:51:37 +00:00 · 2000-09-13 10:15:11 +00:00 · 2000-09-13 10:15:11 +00:00 · bbd16238f2
commit bbd16238f2
parent b848ebc39d
16 changed files with 194 additions and 48 deletions
--- a/themes/classic/global/mac/MANIFEST
+++ b/themes/classic/global/mac/MANIFEST
@ -5,6 +5,7 @@ buttonBindings.xml
 checkbox.css
 classicBindings.xml
 commonDialog.css
+colorpicker.css
 console.css
 filepicker.css
 formatting.css
--- a/themes/classic/global/mac/colorpicker.css
+++ b/themes/classic/global/mac/colorpicker.css
@ -0,0 +1,29 @@
+
+colorpicker[type="button"] {
+  max-width: 35px;
+  max-height: 20px;
+  min-width: 35px;
+  min-height: 20px;
+  border: 1px solid #000000;
+}
+
+.colorpicker-button-menu {
+  max-width: 33px;
+  max-height: 18px;
+  min-width: 33px;
+  min-height: 18px;
+  padding: 2px;
+  border: 1px solid transparent;
+}
+
+.colorpicker-button-menu[open="true"] {
+  border-color: #000000;
+}
+
+.colorpicker-button-colorbox {
+  max-width: 27px;
+  max-height: 12px;
+  min-width: 27px;
+  min-height: 12px;
+  border: 1px solid #000000;
+}
--- a/themes/classic/global/mac/global.css
+++ b/themes/classic/global/mac/global.css
@ -25,6 +25,7 @@
@import url(chrome://global/skin/textfield.css);
@import url(chrome://global/skin/toolbar.css);
@import url(chrome://global/skin/tabcontrol.css);
+@import url(chrome://global/skin/colorpicker.css);

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
@namespace html url("http://www.w3.org/1999/xhtml"); 
--- a/themes/classic/global/mac/jar.mn
+++ b/themes/classic/global/mac/jar.mn
@ -3,6 +3,7 @@ skins\classic.jar:
    global\skin\button.css
    global\skin\checkbox.css
    global\skin\commonDialog.css
+    global\skin\colorpicker.css
    global\skin\console.css
    global\skin\filepicker.css
    global\skin\formatting.css
--- a/themes/classic/global/win/Makefile.in
+++ b/themes/classic/global/win/Makefile.in
@ -35,6 +35,7 @@ EXPORT_RESOURCE_SAMPLES = \
 	button.css \
 	checkbox.css \
 	commonDialog.css \
+	colorpicker.css \
 	console.css \
 	filepicker.css \
 	formatting.css \
--- a/themes/classic/global/win/colorpicker.css
+++ b/themes/classic/global/win/colorpicker.css
@ -0,0 +1,45 @@
+colorpicker[type="button"] {
+  max-width: 35px;
+  max-height: 20px;
+  min-width: 35px;
+  min-height: 20px;
+  border-left: 1px solid threedhighlight;
+  border-top: 1px solid threedhighlight;
+  border-right: 1px solid threeddarkshadow;
+  border-bottom: 1px solid threeddarkshadow;
+}
+
+colorpicker[type="button"][menuactive="true"] {
+  border-left: 1px solid threeddarkshadow;
+  border-top: 1px solid threeddarkshadow;
+  border-right: 1px solid threedhighlight;
+  border-bottom: 1px solid threedhighlight;
+}
+
+.colorpicker-button-menu {
+  max-width: 33px;
+  max-height: 18px;
+  min-width: 33px;
+  min-height: 18px;
+  border-left: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-right: 1px solid threedshadow;
+  border-bottom: 1px solid threedshadow;
+  padding: 1px;
+}
+
+.colorpicker-button-menu[open="true"]
+{
+  border-left: 1px solid threedshadow;
+  border-top: 1px solid threedshadow;
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+.colorpicker-button-colorbox {
+  max-width: 28px;
+  max-height: 13px;
+  min-width: 28px;
+  min-height: 13px;
+  border: 1px solid #000000;
+}
--- a/themes/classic/global/win/global.css
+++ b/themes/classic/global/win/global.css
@ -25,6 +25,7 @@
@import url(chrome://global/skin/textfield.css);
@import url(chrome://global/skin/tabcontrol.css);
@import url(chrome://global/skin/toolbar.css);
+@import url(chrome://global/skin/colorpicker.css);

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
@namespace html url("http://www.w3.org/1999/xhtml"); 
--- a/themes/classic/global/win/jar.mn
+++ b/themes/classic/global/win/jar.mn
@ -4,6 +4,7 @@ skins/classic.jar:
    global/skin/checkbox.css
    global/skin/commonDialog.css
    global/skin/console.css
+    global/skin/colorpicker.css
    global/skin/filepicker.css
    global/skin/formatting.css
    global/skin/global.css
--- a/themes/classic/global/win/makefile.win
+++ b/themes/classic/global/win/makefile.win
@ -34,6 +34,7 @@ install::
 	$(MAKE_INSTALL) checkbox.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) commonDialog.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) console.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
+	$(MAKE_INSTALL) colorpicker.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) filepicker.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) formatting.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
 	$(MAKE_INSTALL) global.css $(DIST)\bin\chrome\skins\$(THEME)\global\skin
--- a/themes/modern/global/colorpicker.css
+++ b/themes/modern/global/colorpicker.css
@ -0,0 +1,29 @@
+
+colorpicker[type="button"] {
+  max-width: 35px;
+  max-height: 20px;
+  min-width: 35px;
+  min-height: 20px;
+  border: 1px outset #CCCCCC;
+}
+
+colorpicker[type="button"][menuactive="true"] {
+  border-style: inset;
+}
+
+.colorpicker-button-menu {
+  max-width: 35px;
+  max-height: 20px;
+  min-width: 35px;
+  min-height: 20px;
+  padding: 2px;
+}
+
+.colorpicker-button-colorbox {
+  max-width: 28px;
+  max-height: 13px;
+  min-width: 28px;
+  min-height: 13px;
+  border: 1px solid #000000;
+}
+
--- a/themes/modern/global/global.css
+++ b/themes/modern/global/global.css
@ -24,6 +24,7 @@
@import url(chrome://global/skin/formatting.css);
@import url(chrome://global/skin/textfield.css);
@import url(chrome://global/skin/tabcontrol.css);
+@import url(chrome://global/skin/colorpicker.css);

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
@namespace html url("http://www.w3.org/1999/xhtml"); 
--- a/themes/modern/jar.mn
+++ b/themes/modern/jar.mn
@ -62,6 +62,7 @@ skins/modern.jar:
    global/skin/columnselect.gif                               (global/columnselect.gif)
    global/skin/columnselect-hover.gif                         (global/columnselect-hover.gif)
    global/skin/commonDialog.css                               (global/commonDialog.css)
+    global/skin/colorpicker.css                                (global/colorpicker.css)
    global/skin/console.css                                    (global/console.css)
    global/skin/dir-closed.gif                                 (global/dir-closed.gif)
    global/skin/dir-open.gif                                   (global/dir-open.gif)
@ -137,6 +138,16 @@ skins/modern.jar:
    global/skin/sortAscending.gif                              (global/sortAscending.gif)
    global/skin/sortDescending.gif                             (global/sortDescending.gif)
    global/skin/splitter.css                                   (global/splitter.css)
+    global/skin/grippy-horizontal-after-h.gif                  (global/grippy-horizontal-after-h.gif)
+    global/skin/grippy-horizontal-after.gif                    (global/grippy-horizontal-after.gif)
+    global/skin/grippy-horizontal-before-h.gif                 (global/grippy-horizontal-before-h.gif)
+    global/skin/grippy-horizontal-before.gif                   (global/grippy-horizontal-before.gif)
+    global/skin/grippy-vertical-after-h.gif                    (global/grippy-vertical-after-h.gif)
+    global/skin/grippy-vertical-after.gif                      (global/grippy-vertical-after.gif)
+    global/skin/grippy-vertical-before-h.gif                   (global/grippy-vertical-before-h.gif)
+    global/skin/grippy-vertical-before.gif                     (global/grippy-vertical-before.gif)
+    global/skin/splitter-horizontal-bg.gif                     (global/splitter-horizontal-bg.gif)
+    global/skin/splitter-vertical-bg.gif                       (global/splitter-vertical-bg.gif)
    global/skin/tabcontrol.css                                 (global/tabcontrol.css)
    global/skin/stop.gif                                       (global/stop.gif)
    global/skin/stop-clicked.gif                               (global/stop-clicked.gif)
--- a/xpfe/components/prefwindow/resources/content/pref-colors.js
+++ b/xpfe/components/prefwindow/resources/content/pref-colors.js
@ -1,4 +1,10 @@
-  function setColorWell(menu,otherId,setbackground)
+function setColorWell(aPicker)
+{
+  var colorRef = aPicker.nextSibling;                // colour value is held here
+  colorRef.setAttribute( "value", aPicker.color );
+}
+
+  function setColorWellSr(menu,otherId,setbackground)
  {
    // Find the colorWell and colorPicker in the hierarchy.
    var colorWell = menu.firstChild;
@ -13,26 +19,15 @@
    colorRef.setAttribute( "value", color );
  }

-  function getColorFromWellAndSetValue( menuid )
+  function getColorFromWellAndSetValue(aPickerId)
  {
-    var menu      = document.getElementById(menuid);  // picker container
-    var colorWell = menu.firstChild;                  // display for picker colour
-    var colorRef  = menu.nextSibling;                 // prefs JS sets this.
-    colorWell.style.backgroundColor = colorRef.getAttribute("value"); // set the well from prefs.
-    var color     = colorWell.style.backgroundColor;   
-    setColorFromPicker( null, color );
-
-
-	return color;
+    var picker = document.getElementById(aPickerId);
+    var colorRef  = picker.nextSibling;
+    var color = colorRef.getAttribute("value");
+    picker.color = color;
+    return color;
  }     

-  function setColorFromPicker(colorWell,color )
-  {
-    if (colorWell) {
-      colorWell.style.backgroundColor = color;
-    }
-  }
-  
  function Startup()
  {
    getColorFromWellAndSetValue("foregroundtextmenu");
--- a/xpfe/components/prefwindow/resources/content/pref-colors.xul
+++ b/xpfe/components/prefwindow/resources/content/pref-colors.xul
@ -51,25 +51,13 @@
      <box>
        <text class="label" value="&textColor.label;" accesskey="&textColor.accesskey;" for="foregroundtextmenu"/>
        <spring flex="1"/>
-        <menu id="foregroundtextmenu" allowevents="true" class="colorpicker">
-          <html:div id="browserForegroundColorDiv" style="width:30px; background-color:white"/>
-          <titledbutton class="popup" align="right"/>
-          <menupopup id="foregroundMenuPopup">
-            <colorpicker allowevents="true" id="foregroundColorpicker" palettename="standard" onclick="setColorWell(this.parentNode.parentNode, 'foregroundtext', false);"/>
-          </menupopup>
-        </menu>
+        <colorpicker type="button" id="foregroundtextmenu" palettename="standard" onchange="setColorWell(this)"/> 
        <data id="foregroundText" pref="true" preftype="color" prefstring="browser.display.foreground_color" prefattribute="value" wsm_attributes="value"/>
      </box>
-      <box>
+      <box style="margin-top: 5px">
        <text class="label" value="&backgroundColor.label;" accesskey="&backgroundColor.label;" for="backgroundmenu"/>
        <spring flex="1"/>
-        <menu id="backgroundmenu" allowevents="true" class="colorpicker">
-          <html:div id="browserBackgroundColorDiv" style="width:30px; background-color:white"/>
-          <titledbutton class="popup" align="right"/>
-          <menupopup id="backgroundMenuPopup">
-            <colorpicker allowevents="true" id="backgroundColorpicker" palettename="standard" onclick="setColorWell(this.parentNode.parentNode, 'background', false);"/>
-          </menupopup>
-        </menu>
+        <colorpicker type="button" id="backgroundmenu" palettename="standard" onchange="setColorWell(this)"/> 
        <data id="background" pref="true" preftype="color" prefstring="browser.display.background_color" prefattribute="value" wsm_attributes="value"/>
      </box>
      <separator class="thin"/>
@ -81,25 +69,13 @@
      <box>
        <text class="label" value="&linkColor.label;" accesskey="&linkColor.accesskey;" for="unvisitedlinkmenu"/>
        <spring flex="1"/>
-        <menu id="unvisitedlinkmenu" allowevents="true" class="colorpicker">
-          <html:div id="browserUnvisitedLinksColorDiv" style="width:30px; background-color:white"/>
-          <titledbutton class="popup" align="right" flex="1"/>
-          <menupopup id="unvisitedLinksMenuPopup">
-            <colorpicker allowevents="true" id="unvisitedLinksColorpicker" palettename="standard" onclick="setColorWell(this.parentNode.parentNode, 'background', false);"/>
-          </menupopup>
-        </menu>
+        <colorpicker type="button" id="unvisitedlinkmenu" palettename="standard" onchange="setColorWell(this)"/> 
        <data id="unvisitedLinks" pref="true" preftype="string" prefstring="browser.anchor_color" prefattribute="value" wsm_attributes="value"/>
      </box>
-    	<box>
+      <box style="margin-top: 5px">
        <text class="label" value="&visitedLinkColor.label;" accesskey="&visitedLinkColor.accesskey;" for="visitedlinkmenu"/>
        <spring flex="1"/>
-        <menu id="visitedlinkmenu" allowevents="true" class="colorpicker">
-          <html:div id="browserVisitedLinksColorDiv" style="width:30px; background-color:white"/>
-          <titledbutton class="popup" align="right"/>
-          <menupopup id="visitedLinksMenuPopup">
-            <colorpicker allowevents="true" id="visitedLinksColorpicker" palettename="standard" onclick="setColorWell(this.parentNode.parentNode, 'background', false);"/>
-          </menupopup>
-        </menu>
+        <colorpicker type="button" id="visitedlinkmenu" palettename="standard" onchange="setColorWell(this)"/> 
        <data id="visitedLinks" pref="true" preftype="string" prefstring="browser.visited_color" prefattribute="value" wsm_attributes="value"/>
      </box>
      <separator class="thin"/>
--- a/xpfe/global/resources/content/xul.css
+++ b/xpfe/global/resources/content/xul.css
@ -424,6 +424,10 @@ colorpicker {
  -moz-binding: url(chrome://global/content/xulBindings.xml#colorpicker);
 }

+colorpicker[type="button"] {
+  -moz-binding: url("chrome://global/content/xulBindings.xml#colorpickerButton");
+}
+
 /** Buttons with Menus:
 *  - menulist
 *  - menulist[editable="true"] (combobox)
--- a/xpfe/global/resources/content/xulBindings.xml
+++ b/xpfe/global/resources/content/xulBindings.xml
@ -507,6 +507,55 @@
    </content>
  </binding>

+ <!-- NOTE: this should really extend menu, but doing this causes the menupopup to be ignored (bug) -->
+  <binding id="colorpickerButton" extends="xul:box">
+    <content>
+      <xul:menu class="colorpicker-button-menu" allowevents="true">
+        <xul:box class="colorpicker-button-colorbox"/>
+        <xul:menupopup class="colorpicker-button-menupopup"
+          oncreate="this.parentNode.parentNode.setAttribute('menuactive', 'true')"
+          ondestroy="this.parentNode.parentNode.setAttribute('menuactive', 'false')">
+          <xul:colorpicker inherits="palettename" allowevents="true"
+           onclick="this.parentNode.parentNode.parentNode.pickerClicked(event)"/>
+        </xul:menupopup>
+      </xul:menu>
+    </content>
+    
+    <implementation>
+      <property name="onchange"/>
+      
+      <property name="color">
+        <getter>
+          return this.getAttribute("color");
+        </getter>
+        <setter>
+          this.mColorBox.setAttribute("style", "background-color: " + val);
+          return this.setAttribute("color", val);
+        </setter>
+      </property>
+      <method name="initialize">
+        <body><![CDATA[
+          var change = this.getAttribute("onchange");
+          if (change) this.onchange = new Function("event", change);
+          
+          var menu = document.getAnonymousNodes(this)[0];
+          this.mPicker = menu.childNodes[1].childNodes[0];
+          this.mColorBox = menu.childNodes[0];
+        ]]></body>
+      </method>
+      <method name="pickerClicked">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          this.color = this.mPicker.color;
+          this.mPicker.parentNode.closePopup();
+          if (this.onchange) this.onchange(aEvent);
+        ]]></body>
+      </method>
+    </implementation>
+    <handlers>
+      <handler event="bindingattached">this.initialize()</handler>
+    </handlers>
+  </binding>
  
  <!-- XUL <statusbar> -->
  <binding id="statusbar" extends="xul:box"/>