DevTools: update text inputs to new style

DevTools: update text inputs to new style

Please see crbug for a screenshot.

BUG=690239
Review-Url: https://codereview.chromium.org/2875193002
Cr-Commit-Position: refs/heads/master@{#477195}
Committed: https://chromium.googlesource.com/chromium/src/+/ea62429d8dcfa87cd32a2ce9dcaa83167c827b99

[luoe, 2017-05-12 01:19:28]

Patchset #1 (id:1) has been deleted

[luoe, 2017-05-12 01:21:09]

Description was changed from

==========
harmony dropdowns and inputs

BUG=
==========

to

==========
DevTools: update dropdowns and inputs to new style

Please see crbug for a screenshot.

BUG=690239
==========

[luoe, 2017-05-12 03:05:51]

luoe@chromium.org changed reviewers:
+ lushnikov@chromium.org, pfeldman@chromium.org

[luoe, 2017-05-12 03:05:51]

Please take a look.

[luoe, 2017-05-12 23:33:11]

luoe@chromium.org changed reviewers:
+ einbinder@chromium.org

[dgozman, 2017-05-15 21:54:42]

dgozman@chromium.org changed reviewers:
+ dgozman@chromium.org

[dgozman, 2017-05-15 21:54:42]

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
(right):

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css:17:
margin: 2px 1px 2px 2px;
clear button is not in the middle of search input

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:178:
border-radius: 2px;
Filter input does not have rounded corners.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:178:
border-radius: 2px;
Blackboxing edit input changes the corners on focus.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:183:
input[type="text"]:not(.error-input):focus {
Device Mode inputs looks different when disabled now (choose Nexus5 for
example).

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:230:
.chrome-select {
Maybe throw in some min-width?

[luoe, 2017-05-18 21:30:52]

Please take a look.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
(right):

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css:17:
margin: 2px 1px 2px 2px;
On 2017/05/15 21:54:42, dgozman wrote:
> clear button is not in the middle of search input

Done.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:178:
border-radius: 2px;
On 2017/05/15 21:54:42, dgozman wrote:
> Blackboxing edit input changes the corners on focus.

Done.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:178:
border-radius: 2px;
On 2017/05/15 21:54:42, dgozman wrote:
> Filter input does not have rounded corners.

Done, toolbar-inputs now have the same rounded corners.

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:183:
input[type="text"]:not(.error-input):focus {
On 2017/05/15 21:54:42, dgozman wrote:
> Device Mode inputs looks different when disabled now (choose Nexus5 for
> example).

Yeah, then let's keep the old style for this disabled device mode size input (no
border).

https://codereview.chromium.org/2875193002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:230:
.chrome-select {
On 2017/05/15 21:54:42, dgozman wrote:
> Maybe throw in some min-width?

Done, 80px.

[einbinder, 2017-05-18 22:11:37]

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css
(right):

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css:24:
border: none;
nit: leave border: none where it was for blaming.

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:184:
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
This looks different from the 1px blue focus border I see in other harmony UI

[luoe, 2017-05-23 21:39:21]

Patchset #3 (id:60001) has been deleted

[luoe, 2017-05-23 23:20:50]

Patchset #3 (id:80001) has been deleted

[luoe, 2017-05-23 23:40:22]

Ptal.

Major changes:
- Text input fields with focus have transparent border.
- Created 'chrome-text-input' class for styled input fields.

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css
(right):

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css:24:
border: none;
On 2017/05/18 22:11:37, einbinder wrote:
> nit: leave border: none where it was for blaming.

This border: none isn't a move from Line 9, but an intentional rule added in
response to dgozman's comment.  Sorry if I'm missing something, could you please
explain?

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:184:
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
On 2017/05/18 22:11:37, einbinder wrote:
> This looks different from the 1px blue focus border I see in other harmony UI

This does differ from the latest UI in other Chromium surfaces, e.g. Bookmark
dialog, Settings, History.  However, I've confirmed with designers that this is
the intended effect, and those other surfaces have tracking bugs to be updated
as well.

[einbinder, 2017-05-24 19:58:32]

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css
(right):

https://codereview.chromium.org/2875193002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/emulation/deviceModeToolbar.css:24:
border: none;
On 2017/05/23 at 23:40:21, luoe wrote:
> On 2017/05/18 22:11:37, einbinder wrote:
> > nit: leave border: none where it was for blaming.
> 
> This border: none isn't a move from Line 9, but an intentional rule added in
response to dgozman's comment.  Sorry if I'm missing something, could you please
explain?

Oh I misread the box-shadow none. My bad.

[luoe, 2017-05-24 23:34:50]

luoe@chromium.org changed reviewers:
- dgozman@chromium.org, einbinder@chromium.org, lushnikov@chromium.org,
pfeldman@chromium.org

[luoe, 2017-05-26 23:19:27]

Description was changed from

==========
DevTools: update dropdowns and inputs to new style

Please see crbug for a screenshot.

BUG=690239
==========

to

==========
DevTools: update text inputs to new style

Please see crbug for a screenshot.

BUG=690239
==========

[luoe, 2017-06-01 01:29:46]

Patchset #4 (id:120001) has been deleted

[luoe, 2017-06-01 01:35:27]

Patchset #4 (id:140001) has been deleted

[luoe, 2017-06-01 01:39:06]

luoe@chromium.org changed reviewers:
+ dgozman@chromium.org, einbinder@chromium.org, pfeldman@chromium.org

[luoe, 2017-06-01 01:39:07]

I've rebased over the cleanup CL, (https://codereview.chromium.org/2906983002/)

This CL introduces a major change in design, so iterating or even not landing
this CL is an option.

Please take a look.

[pfeldman, 2017-06-01 21:16:57]

lgtm

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:124:
var input = createElementWithClass('input', 'default-input');
Maybe create a UI.createInput method for input that would set harmony-input
class instead?

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/HistoryInput.js (right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/HistoryInput.js:28:
this.classList.add('default-input');
That way you would not need to do this...

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:173:
input:not(.default-input):not([type]),
And the :not(...) will convert into .harmony-input

[luoe, 2017-06-06 00:16:27]

Thanks for the reviews

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:124:
var input = createElementWithClass('input', 'default-input');
On 2017/06/01 21:16:56, pfeldman wrote:
> Maybe create a UI.createInput method for input that would set harmony-input
> class instead?

Done.

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/HistoryInput.js (right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/HistoryInput.js:28:
this.classList.add('default-input');
On 2017/06/01 21:16:57, pfeldman wrote:
> That way you would not need to do this...

Done.

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
(right):

https://codereview.chromium.org/2875193002/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css:173:
input:not(.default-input):not([type]),
On 2017/06/01 21:16:57, pfeldman wrote:
> And the :not(...) will convert into .harmony-input

Done.

[luoe, 2017-06-06 02:48:45]

The CQ bit was checked by luoe@chromium.org

[luoe, 2017-06-06 02:48:45]

The patchset sent to the CQ was uploaded after l-g-t-m from
pfeldman@chromium.org
Link to the patchset: https://codereview.chromium.org/2875193002/#ps180001
(title: "ac")

[commit-bot: I haz the power, 2017-06-06 02:49:13]

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, 2017-06-06 04:37:34]

CQ is committing da patch.

Bot data: {"patchset_id": 180001, "attempt_start_ts": 1496717325388590,
"parent_rev": "067ae0c565d431228fbcada9823b47d371f54b7d", "commit_rev":
"ea62429d8dcfa87cd32a2ce9dcaa83167c827b99"}

[commit-bot: I haz the power, 2017-06-06 04:37:45]

Description was changed from

==========
DevTools: update text inputs to new style

Please see crbug for a screenshot.

BUG=690239
==========

to

==========
DevTools: update text inputs to new style

Please see crbug for a screenshot.

BUG=690239

Review-Url: https://codereview.chromium.org/2875193002
Cr-Commit-Position: refs/heads/master@{#477195}
Committed:
https://chromium.googlesource.com/chromium/src/+/ea62429d8dcfa87cd32a2ce9dcaa...
==========

[commit-bot: I haz the power, 2017-06-06 04:37:49]

Committed patchset #5 (id:180001) as
https://chromium.googlesource.com/chromium/src/+/ea62429d8dcfa87cd32a2ce9dcaa...