<commit_before>﻿"use strict";

window.cls || (window.cls = {});

window.cls.ColorPickerView = function(id, name, container_class)
{
  this._es_debugger = window.services["ecmascript-debugger"];
  this._tag_manager = cls.TagManager.get_instance();

  /* interface */
  this.createView = function(container){};
  /**
    * To show the color picker.
    * @param {Object} target. The event target is the color sample to be edited.
    * @param {Object} edit_context. Optional.
    */
  this.show_color_picker = function(target, edit_context){};

  /* private */
  var CSS_CLASS_TARGET = window.cls.ColorPickerView.CSS_CLASS_TARGET;
  var ELE_CLASS = "color-picker";
  var MARGIN = 5; // Minimum vertical margin between the color picker and the edge of the viewport

  this._color_cb = function(color)
  {
    var context = this._edit_context;
    if (context.callback)
    {
      context.callback(color);
    }
    else
    {
      context.current_color = color;
      if (!this._color_notation)
        this._color_notation = this._get_color_notation();
      context.ele_value.firstChild.textContent = window.helpers.get_color_in_notation(color, this._color_notation);
      context.ele_color_swatch.querySelector(".color-swatch-fg-color").style.backgroundColor = color.rgba;
      var property_value_ele = context.ele_value.get_ancestor(".css-property-value");
      if (property_value_ele)
      {
        var new_value = window.helpers.escape_input(property_value_ele.textContent);
        var script = "";
        if (!context.is_svg)
        {
          // Removing it first is a workaround for CORE-31191
          script = "rule.style.removeProperty(\"" + context.prop_name + "\");" +
                   "rule.style.setProperty(\"" + context.prop_name + "\", " +
                                          "\"" + new_value + "\", " +
                                          "\"" + (context.is_important ? "important" : "") + "\")";
        }
        else
        {
          script = "rule.setAttribute(\"" + context.prop_name + "\", " +
                                     "\"" + new_value + "\")";
        }
        var msg = [context.rt_id, 0, 0, script, [["rule", context.rule_id]]];
        var tag = this._tag_manager.IGNORE_RESPONSE;
        this._es_debugger.requestEval(tag, msg);
      }
    }
  };

  this._color_cb_bound = this._color_cb.bind(this);


  /* implementation */
  this.createView = function(container)
  {
    this._panel_ele = this._edit_context.ele_value.get_ancestor("container");
    this._color_picker = new ColorPicker(this._color_cb_bound,
                                         this._edit_context.initial_color);
    container.style.visibility = "hidden";
    container.render(this._color_picker.render(this._edit_context.disable_alpha));
    this._position_color_picker();
    container.style.visibility = "visible";
    window.addEventListener("click", this._hide_on_outside_click, true);
    this._panel_ele.addEventListener("mousewheel", this._prevent_scroll, true);
    this.is_opened = true;
  };

  this.ondestroy = function()
  {
    if (this._ele)
      this._ele.parentNode.removeChild(this._ele);

    if (this._edit_context)
      this._edit_context.ele_value.removeClass("color-picker-active-item");

    if (this._panel_ele)
      this._panel_ele.removeEventListener("mousewheel", this._prevent_scroll, true);

    window.removeEventListener("click", this._hide_on_outside_click, true);
    this._edit_context = null;
    this._ele = null;
    this.is_opened = false;
  };

  this._prevent_scroll = function(event)
  {
    event.preventDefault();
  }.bind(this);

  this.show_color_picker = function(target, edit_context)
  {
    if (this.is_opened)
      this.ondestroy();

    var parent = target.parentNode;
    var declaration_ele = target.get_ancestor(".css-declaration");
    var property_ele = declaration_ele && declaration_ele.querySelector(".css-property");
    var value_ele = declaration_ele && declaration_ele.querySelector(".css-property-value");
    var property = property_ele && property_ele.textContent;
    var value = value_ele && value_ele.textContent;
    var color_value = parent.textContent;
    var initial_color = new Color().parseCSSColor(color_value);

    this._edit_context = edit_context || {
      initial_color: initial_color,
      current_color: initial_color,
      ele_value: parent,
      ele_color_swatch: target,
      prop_name: property,
      position_anchor_selector: ".color-swatch",
      is_important: Boolean(value_ele.querySelector(".css-priority")),
      rt_id: Number(parent.get_attr("parent-node-chain", "rt-id")),
      rule_id: Number(parent.get_attr("parent-node-chain", "rule-id")) ||
               Number(parent.get_attr("parent-node-chain", "obj-id")),
      is_svg: parent.get_attr("parent-node-chain", "rule-id") == "element-svg"
    };

    if (this._edit_context.initial_color)
    {
      this._finalize_show_color_picker();
    }
    else
    {
      var prop = {
        "inherit": property,
        "currentColor": "color"
      }[color_value];
      var obj_id = Number(parent.get_attr("parent-node-chain", "obj-id"));
      var script = "window.getComputedStyle(ele, null)." +
                   "getPropertyValue(\"" + prop + "\");";
      var tag = this._tag_manager.set_callback(this, this._handle_get_color, [color_value]);
      var msg = [this._edit_context.rt_id, 0, 0, script, [["ele", obj_id]]];
      this._es_debugger.requestEval(tag, msg);
    }
  };

  this.cancel_edit_color = function()
  {
    if (this.is_opened)
    {
      this._color_cb_bound(this._edit_context.initial_color);
      this.ondestroy();
      return true;
    }
    return false;
  };

  this._hide_on_outside_click = function(event)
  {
    if (ContextMenu.get_instance().is_visible)
      return;

    if (!(event.target.get_ancestor("." + ELE_CLASS) ||
          event.target.get_ancestor(".color-picker-palette") ||
          event.target.get_ancestor(".tooltip-container"))
    )
    {<commit_msg>Fixed DFL-3025: Canceling color picker opened with "inherit" resets to the wrong color.<commit_after>﻿"use strict";

window.cls || (window.cls = {});

window.cls.ColorPickerView = function(id, name, container_class)
{
  this._es_debugger = window.services["ecmascript-debugger"];
  this._tag_manager = cls.TagManager.get_instance();

  /* interface */
  this.createView = function(container){};
  /**
    * To show the color picker.
    * @param {Object} target. The event target is the color sample to be edited.
    * @param {Object} edit_context. Optional.
    */
  this.show_color_picker = function(target, edit_context){};

  /* private */
  var CSS_CLASS_TARGET = window.cls.ColorPickerView.CSS_CLASS_TARGET;
  var ELE_CLASS = "color-picker";
  var MARGIN = 5; // Minimum vertical margin between the color picker and the edge of the viewport

  this._color_cb = function(color, skip_swatch_update)
  {
    var context = this._edit_context;
    if (context.callback)
    {
      context.callback(color);
    }
    else
    {
      context.current_color = color;
      if (!this._color_notation)
        this._color_notation = this._get_color_notation();
      var color_value = (color.type === "keyword")
                      ? color.cssvalue
                      : window.helpers.get_color_in_notation(color, this._color_notation);
      context.ele_value.firstChild.textContent = color_value;

      // Skip updating this when we're canceling, otherwise we will briefly set the
      // background color to "inherit" before the view is updated, thus flashing it
      // in black which looks bad.
      if (!skip_swatch_update)
      {
        context.ele_color_swatch.removeClass("special");
        context.ele_color_swatch.querySelector(".color-swatch-fg-color").style.backgroundColor = color.rgba;
      }

      var property_value_ele = context.ele_value.get_ancestor(".css-property-value");
      if (property_value_ele)
      {
        var new_value = window.helpers.escape_input(property_value_ele.textContent);
        var script = "";
        if (!context.is_svg)
        {
          // Removing it first is a workaround for CORE-31191
          script = "rule.style.removeProperty(\"" + context.prop_name + "\");" +
                   "rule.style.setProperty(\"" + context.prop_name + "\", " +
                                          "\"" + new_value + "\", " +
                                          "\"" + (context.is_important ? "important" : "") + "\")";
        }
        else
        {
          script = "rule.setAttribute(\"" + context.prop_name + "\", " +
                                     "\"" + new_value + "\")";
        }
        var msg = [context.rt_id, 0, 0, script, [["rule", context.rule_id]]];
        var tag = this._tag_manager.IGNORE_RESPONSE;
        this._es_debugger.requestEval(tag, msg);
      }
    }
  };

  this._color_cb_bound = this._color_cb.bind(this);


  /* implementation */
  this.createView = function(container)
  {
    this._panel_ele = this._edit_context.ele_value.get_ancestor("container");
    this._color_picker = new ColorPicker(this._color_cb_bound,
                                         this._edit_context.initial_color);
    container.style.visibility = "hidden";
    container.render(this._color_picker.render(this._edit_context.disable_alpha));
    this._position_color_picker();
    container.style.visibility = "visible";
    window.addEventListener("click", this._hide_on_outside_click, true);
    this._panel_ele.addEventListener("mousewheel", this._prevent_scroll, true);
    this.is_opened = true;
  };

  this.ondestroy = function()
  {
    if (this._ele)
      this._ele.parentNode.removeChild(this._ele);

    if (this._edit_context)
      this._edit_context.ele_value.removeClass("color-picker-active-item");

    if (this._panel_ele)
      this._panel_ele.removeEventListener("mousewheel", this._prevent_scroll, true);

    window.removeEventListener("click", this._hide_on_outside_click, true);
    this._edit_context = null;
    this._ele = null;
    this.is_opened = false;
  };

  this._prevent_scroll = function(event)
  {
    event.preventDefault();
  }.bind(this);

  this.show_color_picker = function(target, edit_context)
  {
    if (this.is_opened)
      this.ondestroy();

    var parent = target.parentNode;
    var declaration_ele = target.get_ancestor(".css-declaration");
    var property_ele = declaration_ele && declaration_ele.querySelector(".css-property");
    var value_ele = declaration_ele && declaration_ele.querySelector(".css-property-value");
    var property = property_ele && property_ele.textContent;
    var value = value_ele && value_ele.textContent;
    var color_value = parent.textContent;
    var initial_color = new Color().parseCSSColor(color_value);

    this._edit_context = edit_context || {
      initial_color: initial_color,
      current_color: initial_color,
      ele_value: parent,
      ele_color_swatch: target,
      prop_name: property,
      position_anchor_selector: ".color-swatch",
      is_important: Boolean(value_ele.querySelector(".css-priority")),
      rt_id: Number(parent.get_attr("parent-node-chain", "rt-id")),
      rule_id: Number(parent.get_attr("parent-node-chain", "rule-id")) ||
               Number(parent.get_attr("parent-node-chain", "obj-id")),
      is_svg: parent.get_attr("parent-node-chain", "rule-id") == "element-svg"
    };

    if (this._edit_context.initial_color)
    {
      this._finalize_show_color_picker();
    }
    else
    {
      var prop = {
        "inherit": property,
        "currentColor": "color"
      }[color_value];
      var obj_id = Number(parent.get_attr("parent-node-chain", "obj-id"));
      var script = "window.getComputedStyle(ele, null)." +
                   "getPropertyValue(\"" + prop + "\");";
      var tag = this._tag_manager.set_callback(this, this._handle_get_color, [color_value]);
      var msg = [this._edit_context.rt_id, 0, 0, script, [["ele", obj_id]]];
      this._es_debugger.requestEval(tag, msg);
    }
  };

  this.cancel_edit_color = function()
  {
    if (this.is_opened)
    {
      this._color_cb_bound(this._edit_context.initial_color, true);
      this.ondestroy();
      window.element_style.update();
      return true;
    }
    return false;
  };

  this._hide_on_outside_click = function(event)
  {
    if (ContextMenu.get_instance().is_visible)
      return;

    if (!(event.target.get_ancestor("." + ELE_CLASS) ||
          event.target.get_ancestor(".color-picker-palette") ||
          event.target.get_ancestor(".tooltip-container"))
    )
    {
{'fraction_non_alphanumeric': 0.13288377627925427, 'fraction_numerical': 0.0019040063466878223, 'mean_word_length': 2.8339416058394162, 'pattern_counts': {'":': 4, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '643341', 'n_tokens_mistral': 3907, 'n_tokens_neox': 3835, 'n_words': 651}