Web Inspector: make color review larger in the color picker.

https://bugs.webkit.org/show_bug.cgi?id=79339

Reviewed by Vsevolod Vlasov.

* inspector/front-end/Popover.js:
(WebInspector.Popover.prototype.hide):
* inspector/front-end/Spectrum.js:
* inspector/front-end/elementsPanel.css:
(.spectrum-container):
(.spectrum-color):
(.spectrum-display-value):
(.spectrum-hue):
(.spectrum-fill):
(.spectrum-range-container label):
(.spectrum-range-container input):
(.spectrum-slider):
(.spectrum-container .swatch):
* inspector/front-end/inspector.css:
(.swatch):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 360f0a6..e2c94e5 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,26 @@
+2012-02-23  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: make color review larger in the color picker.
+        https://bugs.webkit.org/show_bug.cgi?id=79339
+
+        Reviewed by Vsevolod Vlasov.
+
+        * inspector/front-end/Popover.js:
+        (WebInspector.Popover.prototype.hide):
+        * inspector/front-end/Spectrum.js:
+        * inspector/front-end/elementsPanel.css:
+        (.spectrum-container):
+        (.spectrum-color):
+        (.spectrum-display-value):
+        (.spectrum-hue):
+        (.spectrum-fill):
+        (.spectrum-range-container label):
+        (.spectrum-range-container input):
+        (.spectrum-slider):
+        (.spectrum-container .swatch):
+        * inspector/front-end/inspector.css:
+        (.swatch):
+
 2012-02-23  Kenichi Ishibashi  <bashi@chromium.org>
 
         [Chromium] Add HarfBuzzShaperBase class

diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
index 6dcbfa8..cadf49e 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ

diff --git a/Source/WebCore/inspector/front-end/Spectrum.js b/Source/WebCore/inspector/front-end/Spectrum.js
index 78c04af..3f9a58e 100644 (file)
--- a/Source/WebCore/inspector/front-end/Spectrum.js
+++ b/Source/WebCore/inspector/front-end/Spectrum.js
@@ -51,7 +51,7 @@ WebInspector.Spectrum = function()
 
     var rangeContainer = this._containerElement.createChild("div", "spectrum-range-container");
     var alphaLabel = rangeContainer.createChild("label");
-    alphaLabel.textContent = WebInspector.UIString("alpha: ");
+    alphaLabel.textContent = WebInspector.UIString("\u03B1:");
 
     this._alphaElement = rangeContainer.createChild("input", "spectrum-range");
     this._alphaElement.setAttribute("type", "range");

diff --git a/Source/WebCore/inspector/front-end/elementsPanel.css b/Source/WebCore/inspector/front-end/elementsPanel.css
index 11a99d7..8f9224a 100644 (file)
--- a/Source/WebCore/inspector/front-end/elementsPanel.css
+++ b/Source/WebCore/inspector/front-end/elementsPanel.css
@@ -536,7 +536,7 @@
     background: rgba(230, 230, 230, 1) !important;
     border: 1px solid #646464;
     padding: 10px;
-    width: 210px;
+    width: 220px;
     z-index: 10;
     -webkit-user-select: none;
 }
@@ -552,11 +552,14 @@
     top: 0;
     left: 0;
     bottom: 0;
-    right: 20%;
+    right: 40px;
 }
 
 .spectrum-display-value {
     -webkit-user-select: text;
+    position: relative;
+    left: 2px;
+    top: -6px;
 }
 
 .spectrum-hue {
@@ -564,12 +567,13 @@
     top: 0;
     right: 0;
     bottom: 0;
-    left: 83%;
+    left: 170px;
+    -webkit-box-reflect: right -28px;
 }
 
 .spectrum-fill {
     /* Same as spectrum-color width to force aspect ratio. */
-    margin-top: 80%;
+    margin-top: 150px;
 }
 
 .spectrum-range-container {
@@ -583,12 +587,15 @@
 }
 
 .spectrum-range-container label {
-    width: 32px;
     display: inline-block;
+    padding-right: 4px;
 }
 
 .spectrum-range-container input {
-    width: 130px;
+    position: absolute;
+    left: 15px;
+    right: 40px;
+    margin: 3px 0 0 0;
 }
 
 .swatch, .spectrum-dragger, .spectrum-slider {
@@ -623,9 +630,14 @@
     position: absolute;
     top: 0;
     cursor: pointer;
-    height: 5px;
-    width: 110%;
-    margin-left: -5%;
-    background: white;
-    opacity: .8;
+    border: 1px solid black;
+    height: 4px;
+    left: -1px;
+    right: -1px;
+}
+
+.spectrum-container .swatch {
+    width: 20px;
+    height:20px;
+    margin: 0;
 }

diff --git a/Source/WebCore/inspector/front-end/inspector.css b/Source/WebCore/inspector/front-end/inspector.css
index c5cb07c..490c1f5 100644 (file)
--- a/Source/WebCore/inspector/front-end/inspector.css
+++ b/Source/WebCore/inspector/front-end/inspector.css
@@ -1437,8 +1437,6 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
 }
 
 .swatch {
-    display: inline-block;
-    vertical-align: baseline;
     margin-left: 1px;
     margin-right: 2px;
     margin-bottom: -1px;
@@ -1446,6 +1444,7 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     height: 1em;
     border: 1px solid rgba(128, 128, 128, 0.6);
     background-image: url(Images/checker.png);
+    display: inline-block;
 }
 
 .swatch-inner {