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

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * 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 224 matching lines @@
 .styles-section-title .media:not(.editing-media),
 .styles-section-title .media:not(.editing-media) .subtitle {
     overflow: hidden;
 }
 
 .styles-section-title .media .subtitle {
     float: right;
     color: rgb(85, 85, 85);
 }
 
+.styles-section.sass-style .styles-section-title .media > span {
+    background-color: #eee;
+}

[paulirish, 2016/05/05 02:34:22]

I think we can leave off these styles completely. editability of selectors isn't
that important so we dont need a visual affordance in this case. The feedback
for people that try will be fine.

+
 .styles-section-subtitle {
     color: rgb(85, 85, 85);
     float: right;
     margin-left: 5px;
     max-width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
 
 .styles-section .styles-section-subtitle a {
     color: inherit;
 }
 
 .styles-section .selector {
     color: #888;
 }
 
+.styles-section.sass-style .selector {
+    background-color: #eee;
+}
+
 .styles-section .simple-selector.selector-matches, .styles-section.keyframe-key {
     color: #222;
 }
 
 .styles-section a[data-uncopyable] {
     display: inline-block;
 }
 
 .styles-section a[data-uncopyable]::before {
     content: attr(data-uncopyable);
@@ skipping 495 matching lines @@
     position: absolute;
     right: 0;
     bottom: 0;
     visibility: hidden;
     background-color: rgba(255, 255, 255, 0.9);
 }
 
 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar {
     visibility: visible;
 }