DevTools: [LiveSASS] make selectors and medias read-only for sass rules

third_party/WebKit/Source/devtools/front_end/elements/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 31 matching lines @@
     this._sectionsContainer = this.element.createChild("div");
     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
 
     WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
+    WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.SourceMapAttached, this._onSourceMapAttachedOrDetached, this);
+    WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.SourceMapDetached, this._onSourceMapAttachedOrDetached, this);
 }
 
 /**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
 {
     var exclamationElement = createElement("label", "dt-icon-label");
     exclamationElement.className = "exclamation-mark";
@@ skipping 40 matching lines @@
     if (hasUnknownVendorPrefix(value))
         return true;
 
     return false;
 }
 
 WebInspector.StylesSidebarPane.prototype = {
     /**
      * @param {!WebInspector.Event} event
      */
+    _onSourceMapAttachedOrDetached: function(event)
+    {
+        var header = /** @type {!WebInspector.CSSStyleSheetHeader} */(event.data);
+        var sourceMap = header.cssModel().sourceMapForHeader(header);
+        if (!sourceMap || sourceMap.editable())
+            this.update();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
     _onLayoutEditorChange: function(event)
     {
         var cssModel = /** @type {!WebInspector.CSSModel} */(event.target);
         var styleSheetId = event.data["id"];
         var sourceRange = /** @type {!CSSAgent.SourceRange} */(event.data["range"]);
         var range = WebInspector.TextRange.fromObject(sourceRange);
         this._decorator = new WebInspector.PropertyChangeHighlighter(this, cssModel, styleSheetId, range);
         this.update();
     },
 
@@ skipping 688 matching lines @@
         // Prevent editing the user agent and user rules.
         if (rule.isUserAgent() || rule.isInjected()) {
             this.editable = false;
         } else {
             // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
             if (rule.styleSheetId)
                 this.navigable = !!rule.resourceURL();
         }
     }
 
+    this._isSASSStyle = false;
+    var header = style.styleSheetId ? style.cssModel().styleSheetHeaderForId(style.styleSheetId) : null;
+    if (header) {
+        var sourceMap = header.cssModel().sourceMapForHeader(header);
+        this._isSASSStyle = sourceMap ? sourceMap.editable() : false;
+    }
+    this.element.classList.toggle("sass-style", this._isSASSStyle);
+
     this._mediaListElement = this._titleElement.createChild("div", "media-list media-matches");
     this._selectorRefElement = this._titleElement.createChild("div", "styles-section-subtitle");
     this._updateMediaList();
     this._updateRuleOrigin();
     this._titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
@@ skipping 465 matching lines @@
                 event.consume(true);
                 return;
             }
             var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(location);
             if (uiLocation)
                 WebInspector.Revealer.reveal(uiLocation);
             event.consume(true);
             return;
         }
 
+        if (!this.editable || this._isSASSStyle)
+            return;
+
         var config = new WebInspector.InplaceEditor.Config(this._editingMediaCommitted.bind(this, media), this._editingMediaCancelled.bind(this, element), undefined, this._editingMediaBlurHandler.bind(this));
         WebInspector.InplaceEditor.startEditing(element, config);
 
         element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
         this._parentPane.setEditingStyle(true);
         var parentMediaElement = element.enclosingNodeOrSelfWithClass("media");
         parentMediaElement.classList.add("editing-media");
 
         event.consume(true);
     },
@@ skipping 87 matching lines @@
                 WebInspector.Revealer.reveal(uiLocation);
             event.consume(true);
             return;
         }
         this._startEditingOnMouseEvent();
         event.consume(true);
     },
 
     _startEditingOnMouseEvent: function()
     {
-        if (!this.editable)
+        if (!this.editable || this._isSASSStyle)
             return;
 
         var rule = this._style.parentRule;
         if (!rule && !this.propertiesTreeOutline.rootElement().childCount()) {
             this.addNewBlankProperty().startEditing();
             return;
         }
 
         if (!rule)
             return;
@@ skipping 1667 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }