DevTools: Modify BezierSwatch to follow same style as ColorSwatch

DevTools: Modify BezierSwatch to follow same style as ColorSwatch

Creating a custom element for BezierSwatch (swatch icon with associated
text) will allow us to put bezier swatches in Sources in the same manner
as color swatches.

BUG=642782
Committed: https://crrev.com/8967579cf5145f067cba799efc43e72dc0c14d31
Cr-Commit-Position: refs/heads/master@{#416770}

[flandy, 2016-08-31 19:46:26]

flandy@google.com changed reviewers:
+ dgozman@chromium.org, lushnikov@chromium.org

[flandy, 2016-08-31 19:46:26]

Please take a look.

[lushnikov, 2016-08-31 20:11:04]

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js (right):

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:190: cubicBezier:
function()
let's not parse the model in the icon (the icon itself doesn't need model). 

Let's add a text getter instead

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:207:
setTextHidden: function(hide)
hideText

to be consistent with ColorSwatch

[flandy, 2016-08-31 22:12:08]

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js (right):

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:190: cubicBezier:
function()
On 2016/08/31 20:11:04, lushnikov wrote:
> let's not parse the model in the icon (the icon itself doesn't need model). 
> 
> Let's add a text getter instead

Okay. Can we do without a text getter and just read textContent from the
BezierSwatch element instead? I can't define a text() getter because text is
already defined on the Node superclass.

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:207:
setTextHidden: function(hide)
On 2016/08/31 20:11:04, lushnikov wrote:
> hideText
> 
> to be consistent with ColorSwatch

Done.

[lushnikov, 2016-09-01 22:06:52]

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js (right):

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:190: cubicBezier:
function()
As far as it works with hidden text - i'm fine with that

[flandy, 2016-09-01 23:12:44]

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js (right):

https://codereview.chromium.org/2298903002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js:190: cubicBezier:
function()
On 2016/09/01 22:06:52, lushnikov wrote:
> As far as it works with hidden text - i'm fine with that 

Yes it works on hidden text.

[lushnikov, 2016-09-02 21:42:03]

https://codereview.chromium.org/2298903002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
(right):

https://codereview.chromium.org/2298903002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js:59:
this._swatch.setText(/** @type {string} */ (event.data));
can we use .textContent = ... here?
Otherwise, the API looks bad

[flandy, 2016-09-02 22:08:05]

https://codereview.chromium.org/2298903002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
(right):

https://codereview.chromium.org/2298903002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js:59:
this._swatch.setText(/** @type {string} */ (event.data));
On 2016/09/02 21:42:03, lushnikov wrote:
> can we use .textContent = ... here?
> Otherwise, the API looks bad

No because then we can't hide the text. Why don't we use getter and setter but
call them bezierText and setBezierText.

[lushnikov, 2016-09-06 16:51:05]

lgtm

[flandy, 2016-09-06 17:21:41]

The CQ bit was checked by flandy@google.com

[commit-bot: I haz the power, 2016-09-06 17:21:58]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-09-06 21:10:19]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-09-06 21:10:22]

Failed to apply patch for
third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css:
While running git apply --index -3 -p1;
  error: patch failed:
third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css:22
  Falling back to three-way merge...
  Applied patch to
'third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css' with
conflicts.
  U third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css

Patch:       third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
Index: third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
b/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
index
20f30c05fe09e64827bb46f8d5367f22a2efedea..723111958efefb0387c1c48ea15e2cc49dcda0a9
100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
@@ -8,7 +8,7 @@
     white-space: nowrap;
 }
 
-.bezier-swatch {
+.bezier-swatch-icon {
     position: relative;
     margin-left: 1px;
     margin-right: 2px;
@@ -22,14 +22,15 @@
     -webkit-mask-size: 190px 30px;
     -webkit-mask-position: -80px -20px;
     background-color: #9C27B0;
+    cursor: default;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
-.bezier-swatch {
+.bezier-swatch-icon {
     -webkit-mask-image: url(Images/smallIcons_2x.png);
 }
 } /* media */
 
-.bezier-swatch:hover {
+.bezier-swatch-icon:hover {
     background-color: #800080;
 }

[flandy, 2016-09-06 21:47:07]

The CQ bit was checked by flandy@google.com

[flandy, 2016-09-06 21:47:07]

The patchset sent to the CQ was uploaded after l-g-t-m from
lushnikov@chromium.org
Link to the patchset: https://codereview.chromium.org/2298903002/#ps60001
(title: "Fix merge conflict")

[commit-bot: I haz the power, 2016-09-06 21:47:40]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-09-06 23:28:04]

Committed patchset #4 (id:60001)

[commit-bot: I haz the power, 2016-09-06 23:30:48]

Description was changed from

==========
DevTools: Modify BezierSwatch to follow same style as ColorSwatch

Creating a custom element for BezierSwatch (swatch icon with associated
text) will allow us to put bezier swatches in Sources in the same manner
as color swatches.

BUG=642782
==========

to

==========
DevTools: Modify BezierSwatch to follow same style as ColorSwatch

Creating a custom element for BezierSwatch (swatch icon with associated
text) will allow us to put bezier swatches in Sources in the same manner
as color swatches.

BUG=642782

Committed: https://crrev.com/8967579cf5145f067cba799efc43e72dc0c14d31
Cr-Commit-Position: refs/heads/master@{#416770}
==========

[commit-bot: I haz the power, 2016-09-06 23:30:50]

Patchset 4 (id:??) landed as
https://crrev.com/8967579cf5145f067cba799efc43e72dc0c14d31
Cr-Commit-Position: refs/heads/master@{#416770}