DevTools: [Styles] Display color swatch for editable styles

Source/devtools/front_end/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 1938 matching lines @@
         var color = WebInspector.Color.parse(text);
 
         // We can be called with valid non-color values of |text| (like 'none' from border style)
         if (!color)
             return document.createTextNode(text);
 
         var format = WebInspector.StylesSidebarPane._colorFormat(color);
         var spectrumHelper = this.editablePane() && this.editablePane()._spectrumHelper;
         var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null;
 
-        var isEditable = !!(this._styleRule && this._styleRule.editable);
+        var isEditable = !!(this._styleRule && this._styleRule.editable !== false); // |editable| is true by default.
         var colorSwatch = new WebInspector.ColorSwatch(!isEditable);
         colorSwatch.setColorString(text);
         colorSwatch.element.addEventListener("click", swatchClick.bind(this), false);
 
         var scrollerElement;
         var boundSpectrumChanged = spectrumChanged.bind(this);
         var boundSpectrumHidden = spectrumHidden.bind(this);
 
         /**
          * @param {!WebInspector.Event} e
@@ skipping 1019 matching lines @@
             return;
         }
 
         var results = this._cssCompletions.startsWith(prefix);
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }