Add m-esr52 at 52.6.0

1 files changed, 565 insertions, 0 deletions

diff --git a/toolkit/content/widgets/colorpicker.xml b/toolkit/content/widgets/colorpicker.xml
new file mode 100644
index 000000000..30f8a6354
--- /dev/null
+++ b/toolkit/content/widgets/colorpicker.xml
@@ -0,0 +1,565 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<bindings id="colorpickerBindings"
+   xmlns="http://www.mozilla.org/xbl"
+   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
+    <resources>
+      <stylesheet src="chrome://global/skin/colorpicker.css"/>
+    </resources>
+
+    <content>
+      <xul:vbox flex="1">
+
+        <xul:hbox>
+          <xul:image class="colorpickertile cp-light" color="#FFFFFF"/>
+          <xul:image class="colorpickertile cp-light" color="#FFCCCC"/>
+          <xul:image class="colorpickertile cp-light" color="#FFCC99"/>
+          <xul:image class="colorpickertile cp-light" color="#FFFF99"/>
+          <xul:image class="colorpickertile cp-light" color="#FFFFCC"/>
+          <xul:image class="colorpickertile cp-light" color="#99FF99"/>
+          <xul:image class="colorpickertile cp-light" color="#99FFFF"/>
+          <xul:image class="colorpickertile cp-light" color="#CCFFFF"/>
+          <xul:image class="colorpickertile cp-light" color="#CCCCFF"/>
+          <xul:image class="colorpickertile cp-light" color="#FFCCFF"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#CCCCCC"/>
+          <xul:image class="colorpickertile" color="#FF6666"/>
+          <xul:image class="colorpickertile" color="#FF9966"/>
+          <xul:image class="colorpickertile cp-light" color="#FFFF66"/>
+          <xul:image class="colorpickertile cp-light" color="#FFFF33"/>
+          <xul:image class="colorpickertile cp-light" color="#66FF99"/>
+          <xul:image class="colorpickertile cp-light" color="#33FFFF"/>
+          <xul:image class="colorpickertile cp-light" color="#66FFFF"/>
+          <xul:image class="colorpickertile" color="#9999FF"/>
+          <xul:image class="colorpickertile" color="#FF99FF"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#C0C0C0"/>
+          <xul:image class="colorpickertile" color="#FF0000"/>
+          <xul:image class="colorpickertile" color="#FF9900"/>
+          <xul:image class="colorpickertile" color="#FFCC66"/>
+          <xul:image class="colorpickertile cp-light" color="#FFFF00"/>
+          <xul:image class="colorpickertile cp-light" color="#33FF33"/>
+          <xul:image class="colorpickertile" color="#66CCCC"/>
+          <xul:image class="colorpickertile" color="#33CCFF"/>
+          <xul:image class="colorpickertile" color="#6666CC"/>
+          <xul:image class="colorpickertile" color="#CC66CC"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#999999"/>
+          <xul:image class="colorpickertile" color="#CC0000"/>
+          <xul:image class="colorpickertile" color="#FF6600"/>
+          <xul:image class="colorpickertile" color="#FFCC33"/>
+          <xul:image class="colorpickertile" color="#FFCC00"/>
+          <xul:image class="colorpickertile" color="#33CC00"/>
+          <xul:image class="colorpickertile" color="#00CCCC"/>
+          <xul:image class="colorpickertile" color="#3366FF"/>
+          <xul:image class="colorpickertile" color="#6633FF"/>
+          <xul:image class="colorpickertile" color="#CC33CC"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#666666"/>
+          <xul:image class="colorpickertile" color="#990000"/>
+          <xul:image class="colorpickertile" color="#CC6600"/>
+          <xul:image class="colorpickertile" color="#CC9933"/>
+          <xul:image class="colorpickertile" color="#999900"/>
+          <xul:image class="colorpickertile" color="#009900"/>
+          <xul:image class="colorpickertile" color="#339999"/>
+          <xul:image class="colorpickertile" color="#3333FF"/>
+          <xul:image class="colorpickertile" color="#6600CC"/>
+          <xul:image class="colorpickertile" color="#993399"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#333333"/>
+          <xul:image class="colorpickertile" color="#660000"/>
+          <xul:image class="colorpickertile" color="#993300"/>
+          <xul:image class="colorpickertile" color="#996633"/>
+          <xul:image class="colorpickertile" color="#666600"/>
+          <xul:image class="colorpickertile" color="#006600"/>
+          <xul:image class="colorpickertile" color="#336666"/>
+          <xul:image class="colorpickertile" color="#000099"/>
+          <xul:image class="colorpickertile" color="#333399"/>
+          <xul:image class="colorpickertile" color="#663366"/>
+        </xul:hbox>
+        <xul:hbox>
+          <xul:image class="colorpickertile" color="#000000"/>
+          <xul:image class="colorpickertile" color="#330000"/>
+          <xul:image class="colorpickertile" color="#663300"/>
+          <xul:image class="colorpickertile" color="#663333"/>
+          <xul:image class="colorpickertile" color="#333300"/>
+          <xul:image class="colorpickertile" color="#003300"/>
+          <xul:image class="colorpickertile" color="#003333"/>
+          <xul:image class="colorpickertile" color="#000066"/>
+          <xul:image class="colorpickertile" color="#330099"/>
+          <xul:image class="colorpickertile" color="#330033"/>
+        </xul:hbox>
+      </xul:vbox>
+      <!-- Something to take tab focus
+      <button style="border : 0px; width: 0px; height: 0px;"/>
+      -->
+    </content>
+
+    <implementation implements="nsIDOMEventListener">
+      <property name="color">
+        <getter><![CDATA[
+          return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
+        ]]></getter>
+        <setter><![CDATA[
+          if (!val)
+            return val;
+          var uppercaseVal = val.toUpperCase();
+          // Translate standard HTML color strings:
+          if (uppercaseVal[0] != "#") {
+            switch (uppercaseVal) {
+              case "GREEN":
+                uppercaseVal = "#008000";
+                break;
+              case "LIME":
+                uppercaseVal = "#00FF00";
+                break;
+              case "OLIVE":
+                uppercaseVal = "#808000";
+                break;
+              case "TEAL":
+                uppercaseVal = "#008080";
+                break;
+              case "YELLOW":
+                uppercaseVal = "#FFFF00";
+                break;
+              case "RED":
+                uppercaseVal = "#FF0000";
+                break;
+              case "MAROON":
+                uppercaseVal = "#800000";
+                break;
+              case "PURPLE":
+                uppercaseVal = "#800080";
+                break;
+              case "FUCHSIA":
+                uppercaseVal = "#FF00FF";
+                break;
+              case "NAVY":
+                uppercaseVal = "#000080";
+                break;
+              case "BLUE":
+                uppercaseVal = "#0000FF";
+                break;
+              case "AQUA":
+                uppercaseVal = "#00FFFF";
+                break;
+              case "WHITE":
+                uppercaseVal = "#FFFFFF";
+                break;
+              case "SILVER":
+                uppercaseVal = "#C0C0C0";
+                break;
+              case "GRAY":
+                uppercaseVal = "#808080";
+                break;
+              default: // BLACK
+                uppercaseVal = "#000000";
+                break;
+            }
+          }
+          var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
+          if (cells.item(0)) {
+            this.selectCell(cells[0]);
+            this.hoverCell(this.mSelectedCell);
+          }
+          return val;
+        ]]></setter>
+      </property>
+
+      <method name="initColor">
+        <parameter name="aColor"/>
+        <body><![CDATA[
+          // Use this to initialize color without
+          //  triggering the "onselect" handler,
+          //  which closes window when it's a popup
+          this.mDoOnSelect = false;
+          this.color = aColor;
+          this.mDoOnSelect = true;
+        ]]></body>
+      </method>
+
+      <method name="initialize">
+        <body><![CDATA[
+          this.mSelectedCell = null;
+          this.mHoverCell = null;
+          this.mBox = document.getAnonymousNodes(this)[0];
+          this.mIsPopup = false;
+          this.mDoOnSelect = true;
+
+          let imageEls = this.mBox.querySelectorAll("image");
+          // We set the background of the picker tiles here using images in
+          // order for the color to show up even when author colors are
+          // disabled or the user is using high contrast mode.
+          for (let el of imageEls) {
+            let dataURI = "data:image/svg+xml,<svg style='background-color: " +
+                          encodeURIComponent(el.getAttribute("color")) +
+                          "' xmlns='http://www.w3.org/2000/svg' />";
+            el.setAttribute("src", dataURI);
+          }
+
+          this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
+
+          // used to capture keydown at the document level
+          this.mPickerKeyDown = function(aEvent)
+          {
+            document._focusedPicker.pickerKeyDown(aEvent);
+          }
+
+        ]]></body>
+      </method>
+
+      <method name="_fireEvent">
+        <parameter name="aTarget"/>
+        <parameter name="aEventName"/>
+        <body>
+        <![CDATA[
+          try {
+            var event = document.createEvent("Events");
+            event.initEvent(aEventName, true, true);
+            var cancel = !aTarget.dispatchEvent(event);
+            if (aTarget.hasAttribute("on" + aEventName)) {
+              var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
+              var rv = fn.call(aTarget, event);
+              if (rv == false)
+                cancel = true;
+            }
+            return !cancel;
+          }
+          catch (e) {
+            Components.utils.reportError(e);
+          }
+          return false;
+        ]]>
+        </body>
+      </method>
+
+      <method name="resetHover">
+        <body><![CDATA[
+          if (this.mHoverCell)
+            this.mHoverCell.removeAttribute("hover");
+        ]]></body>
+      </method>
+
+      <method name="getColIndex">
+        <parameter name="aCell"/>
+        <body><![CDATA[
+          var cell = aCell;
+          var idx;
+          for (idx = -1; cell; idx++)
+            cell = cell.previousSibling;
+
+          return idx;
+        ]]></body>
+      </method>
+
+      <method name="isColorCell">
+        <parameter name="aCell"/>
+        <body><![CDATA[
+          return aCell && aCell.hasAttribute("color");
+        ]]></body>
+      </method>
+
+      <method name="hoverLeft">
+        <body><![CDATA[
+          var cell = this.mHoverCell.previousSibling;
+          this.hoverCell(cell);
+        ]]></body>
+      </method>
+
+      <method name="hoverRight">
+        <body><![CDATA[
+          var cell = this.mHoverCell.nextSibling;
+          this.hoverCell(cell);
+        ]]></body>
+      </method>
+
+      <method name="hoverUp">
+        <body><![CDATA[
+          var row = this.mHoverCell.parentNode.previousSibling;
+          if (row) {
+            var colIdx = this.getColIndex(this.mHoverCell);
+            var cell = row.childNodes[colIdx];
+            this.hoverCell(cell);
+          }
+        ]]></body>
+      </method>
+
+      <method name="hoverDown">
+        <body><![CDATA[
+          var row = this.mHoverCell.parentNode.nextSibling;
+          if (row) {
+            var colIdx = this.getColIndex(this.mHoverCell);
+            var cell = row.childNodes[colIdx];
+            this.hoverCell(cell);
+          }
+        ]]></body>
+      </method>
+
+      <method name="hoverTo">
+        <parameter name="aRow"/>
+        <parameter name="aCol"/>
+
+        <body><![CDATA[
+          var row = this.mBox.childNodes[aRow];
+          if (!row) return;
+          var cell = row.childNodes[aCol];
+          if (!cell) return;
+          this.hoverCell(cell);
+        ]]></body>
+      </method>
+
+      <method name="hoverCell">
+        <parameter name="aCell"/>
+
+        <body><![CDATA[
+          if (this.isColorCell(aCell)) {
+            this.resetHover();
+            aCell.setAttribute("hover", "true");
+            this.mHoverCell = aCell;
+            var event = document.createEvent('Events');
+            event.initEvent('DOMMenuItemActive', true, true);
+            aCell.dispatchEvent(event);
+          }
+        ]]></body>
+      </method>
+
+      <method name="selectHoverCell">
+        <body><![CDATA[
+          this.selectCell(this.mHoverCell);
+        ]]></body>
+      </method>
+
+      <method name="selectCell">
+        <parameter name="aCell"/>
+
+        <body><![CDATA[
+          if (this.isColorCell(aCell)) {
+            if (this.mSelectedCell)
+              this.mSelectedCell.removeAttribute("selected");
+
+            this.mSelectedCell = aCell;
+            aCell.setAttribute("selected", "true");
+
+            if (this.mDoOnSelect)
+              this._fireEvent(this, "select");
+          }
+        ]]></body>
+      </method>
+
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          switch (aEvent.keyCode) {
+            case 37: // left
+              this.hoverLeft();
+              break;
+            case 38: // up
+              this.hoverUp();
+              break;
+            case 39: // right
+              this.hoverRight();
+              break;
+            case 40: // down
+              this.hoverDown();
+              break;
+            case 13: // enter
+            case 32: // space
+              this.selectHoverCell();
+              break;
+          }
+        ]]></body>
+      </method>
+
+	  <constructor><![CDATA[
+        this.initialize();
+      ]]></constructor>
+
+    </implementation>
+
+    <handlers>
+      <handler event="mouseover"><![CDATA[
+        this.hoverCell(event.originalTarget);
+      ]]></handler>
+
+      <handler event="click"><![CDATA[
+        if (event.originalTarget.hasAttribute("color")) {
+          this.selectCell(event.originalTarget);
+          this.hoverCell(this.mSelectedCell);
+        }
+      ]]></handler>
+
+
+      <handler event="focus" phase="capturing">
+      <![CDATA[
+        if (!mIsPopup && this.getAttribute('focused') != 'true') {
+          this.setAttribute('focused', 'true');
+          document.addEventListener("keydown", this, true);
+          if (this.mSelectedCell)
+            this.hoverCell(this.mSelectedCell);
+        }
+      ]]>
+      </handler>
+
+      <handler event="blur" phase="capturing">
+      <![CDATA[
+        if (!mIsPopup && this.getAttribute('focused') == 'true') {
+          document.removeEventListener("keydown", this, true);
+          this.removeAttribute('focused');
+          this.resetHover();
+        }
+      ]]>
+      </handler>
+    </handlers>
+  </binding>
+
+  <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
+           extends="chrome://global/content/bindings/general.xml#basecontrol">
+    <resources>
+      <stylesheet src="chrome://global/skin/colorpicker.css"/>
+    </resources>
+
+    <content>
+      <xul:image class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
+
+      <xul:panel class="colorpicker-button-menupopup"
+                 anonid="colorpopup" noautofocus="true" level="top"
+                 onmousedown="event.stopPropagation()"
+                 onpopupshowing="this._colorPicker.onPopupShowing()"
+                 onpopuphiding="this._colorPicker.onPopupHiding()"
+                 onselect="this._colorPicker.pickerChange()">
+        <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
+      </xul:panel>
+    </content>
+
+    <implementation>
+      <property name="open"
+                onget="return this.getAttribute('open') == 'true'"
+                onset="this.showPopup();"/>
+      <property name="color">
+        <getter><![CDATA[
+          return this.getAttribute("color");
+        ]]></getter>
+        <setter><![CDATA[
+          this.mColorBox.setAttribute("src",
+            "data:image/svg+xml,<svg style='background-color: " +
+            encodeURIComponent(val) +
+            "' xmlns='http://www.w3.org/2000/svg' />");
+          this.setAttribute("color", val);
+          return val;
+        ]]></setter>
+      </property>
+
+      <method name="initialize">
+        <body><![CDATA[
+          this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
+          this.mColorBox.setAttribute("src",
+            "data:image/svg+xml,<svg style='background-color: " +
+            encodeURIComponent(this.color) +
+            "' xmlns='http://www.w3.org/2000/svg' />");
+
+          var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup")
+          popup._colorPicker = this;
+
+          this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker")
+        ]]></body>
+      </method>
+
+      <method name="_fireEvent">
+        <parameter name="aTarget"/>
+        <parameter name="aEventName"/>
+        <body>
+        <![CDATA[
+          try {
+            var event = document.createEvent("Events");
+            event.initEvent(aEventName, true, true);
+            var cancel = !aTarget.dispatchEvent(event);
+            if (aTarget.hasAttribute("on" + aEventName)) {
+              var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
+              var rv = fn.call(aTarget, event);
+              if (rv == false)
+                cancel = true;
+            }
+            return !cancel;
+          }
+          catch (e) {
+            dump(e);
+          }
+          return false;
+        ]]>
+        </body>
+      </method>
+
+      <method name="showPopup">
+        <body><![CDATA[
+          this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
+        ]]></body>
+      </method>
+
+      <method name="hidePopup">
+        <body><![CDATA[
+          this.mPicker.parentNode.hidePopup();
+        ]]></body>
+      </method>
+
+      <method name="onPopupShowing">
+        <body><![CDATA[
+          if ("resetHover" in this.mPicker)
+            this.mPicker.resetHover();
+          document.addEventListener("keydown", this.mPicker, true);
+          this.mPicker.mIsPopup = true;
+          // Initialize to current button's color
+          this.mPicker.initColor(this.color);
+        ]]></body>
+      </method>
+
+      <method name="onPopupHiding">
+        <body><![CDATA[
+          // Removes the key listener
+          document.removeEventListener("keydown", this.mPicker, true);
+          this.mPicker.mIsPopup = false;
+        ]]></body>
+      </method>
+
+      <method name="pickerChange">
+        <body><![CDATA[
+          this.color = this.mPicker.color;
+          setTimeout(function(aPopup) { aPopup.hidePopup() }, 1, this.mPicker.parentNode);
+
+          this._fireEvent(this, "change");
+        ]]></body>
+      </method>
+
+      <constructor><![CDATA[
+        this.initialize();
+      ]]></constructor>
+
+    </implementation>
+
+    <handlers>
+      <handler event="keydown"><![CDATA[
+        // open popup if key is space/up/left/right/down and popup is closed
+        if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
+          this.showPopup();
+        else if ( (event.keyCode == 27) && this.open)
+          this.hidePopup();
+      ]]></handler>
+    </handlers>
+  </binding>
+
+  <binding id="colorpickertile" role="xul:colorpickertile">
+  </binding>
+
+</bindings>
+