Web Inspector: style declaration editor: visual highlight doesn't match actual select...
authorjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Jun 2014 22:26:15 +0000 (22:26 +0000)
committerjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Jun 2014 22:26:15 +0000 (22:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=133965

Reviewed by Joseph Pecoraro.

Update styles for css style editor to fix highlighting visual mismatch glitch.

* UserInterface/Views/CSSStyleDeclarationTextEditor.css:
(.css-style-text-editor > .CodeMirror .CodeMirror-placeholder):
(.css-style-text-editor > .CodeMirror pre):
(.css-style-text-editor.read-only > .CodeMirror pre):
Updated styles to eliminate highlight mismatch by adjusting the padding and
text-indent values.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@170077 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css

index b1a60f4..6dbc655 100644 (file)
@@ -1,3 +1,19 @@
+2014-06-17  Jono Wells  <jonowells@apple.com>
+
+        Web Inspector: style declaration editor: visual highlight doesn't match actual selected text
+        https://bugs.webkit.org/show_bug.cgi?id=133965
+
+        Reviewed by Joseph Pecoraro.
+
+        Update styles for css style editor to fix highlighting visual mismatch glitch.
+
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-placeholder):
+        (.css-style-text-editor > .CodeMirror pre):
+        (.css-style-text-editor.read-only > .CodeMirror pre):
+        Updated styles to eliminate highlight mismatch by adjusting the padding and
+        text-indent values.
+
 2014-06-10  Brian J. Burg  <burg@cs.washington.edu>
 
         Web Inspector: recording is overused as both noun and verb in TimelineManager
index 85d2e0c..3e953c1 100644 (file)
 .css-style-text-editor > .CodeMirror .CodeMirror-placeholder {
     font-family: "Lucida Grande", sans-serif;
     color: rgb(128, 128, 128);
-    padding: 0 5px 0 39px;
-    text-indent: -14px;
+    padding: 0 5px 0 25px;
 }
 
 .css-style-text-editor > .CodeMirror pre {
-    padding: 1px 5px 1px 39px;
-    text-indent: -35px;
+    /* Compensate for the checkboxes so properties line up with readonly styles that do not have checkboxes. */
+    padding: 1px 5px 1px 25px;
+    text-indent: -21px;
 }
 
 .css-style-text-editor > .CodeMirror pre * {
@@ -53,8 +53,7 @@
 }
 
 .css-style-text-editor.read-only > .CodeMirror pre {
-    /* Compensate for the missing checkboxes so properties line up with editable styles that have checkboxes. */
-    text-indent: -14px;
+    text-indent: 0;
 }
 
 .css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor {