DevTools: use chess-like icon positions

DevTools: use chess-like icon positions

This patch:
- moves icons from {x, y, width, height} coordinates into
  chess-like coordinates. Position 'a1' means bottom-left corner,
  and position 'a8' means 1st column 8th row.
- removes spritesheet image sizes from inspectorCommon.css. This
  turned out to be possible since icon's background/mask-image
  always have default size of the image.

This solves multiple issues:
- it's easy to convert between icon coordinates and spritesheets.
  Chess-like coordinate systems are embedded into SVGs: 
  http://imgur.com/a/YcSSs
- it discourages abusing of icon sizes - icon could occupy the
  whole cell only
- resizing spritesheet is as easy as changing its size in inkscape

Performance-wise, this change doesn't impact time to create icon in
a noticeble way. Before this patch, creating all 107 icons was
taking ~3ms on my MacBook Pro 2015. With this patch, the time
didn't change.

BUG=700249
R=dgozman

Review-Url: https://codereview.chromium.org/2776893002
Cr-Commit-Position: refs/heads/master@{#459958}
Committed: https://chromium.googlesource.com/chromium/src/+/8c40265f143b45ecc7ddf49aedb363d6c7c70e69

[lushnikov, 2017-03-25 18:43:19]

Description was changed from

==========
DevTools: use chess-like icon positions

This patch:
- moves icons from {x, y, width, height} coordinates into
  chess-like coordinates. Position 'a1' means bottom-left corner,
  and position 'a8' means 1st column 8th row.
- removes spritesheet image sizes from inspectorCommon.css. This
  turned out to be possible since icon's background/mask-image
  always have default size of the image.

This solves multiple issues:
- it's easy to convert between icon coordinates and spritesheets
  (chess-like coordinate system is embedded into SVG)
- it discourages abusing of icon sizes - icon could occupy the
  whole cell only
- resizing spritesheet is as easy as changing its size in inkscape

Performance-wise, this change doesn't impact time to create icon in
a noticeble way. Before this patch, creating all 107 icons was
taking ~3ms on my MacBook Pro 2015. With this patch, the time
didn't change.

BUG=700249
R=dgozman
==========

to

==========
DevTools: use chess-like icon positions

This patch:
- moves icons from {x, y, width, height} coordinates into
  chess-like coordinates. Position 'a1' means bottom-left corner,
  and position 'a8' means 1st column 8th row.
- removes spritesheet image sizes from inspectorCommon.css. This
  turned out to be possible since icon's background/mask-image
  always have default size of the image.

This solves multiple issues:
- it's easy to convert between icon coordinates and spritesheets.
  Chess-like coordinate systems are embedded into SVGs: 
  http://imgur.com/a/YcSSs
- it discourages abusing of icon sizes - icon could occupy the
  whole cell only
- resizing spritesheet is as easy as changing its size in inkscape

Performance-wise, this change doesn't impact time to create icon in
a noticeble way. Before this patch, creating all 107 icons was
taking ~3ms on my MacBook Pro 2015. With this patch, the time
didn't change.

BUG=700249
R=dgozman
==========

[lushnikov, 2017-03-25 18:44:37]

please, take a look.

[lushnikov, 2017-03-25 18:45:34]

The CQ bit was checked by lushnikov@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2017-03-25 18:45:40]

Dry run: 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-03-25 19:37:43]

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

[commit-bot: I haz the power, 2017-03-25 19:37:43]

Dry run: Try jobs failed on following builders:
  linux_chromium_chromeos_ozone_rel_ng on master.tryserver.chromium.linux
(JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[dgozman, 2017-03-25 19:44:21]

https://codereview.chromium.org/2776893002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/Icon.js (right):

https://codereview.chromium.org/2776893002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/Icon.js:119: 'smallicon-bezier':
{position: 'a5', spritesheet: 'smallicons', isMask: true},
I think calculations are not equal to previous values:

a5 -> { -(10 + 10) * 5, (10 + 10) * 1 - 10 }  !== {0, 0}

Am I missing something?

[dgozman, 2017-03-25 19:45:56]

Nice idea overall!

> it discourages abusing of icon sizes - icon could occupy the whole cell only
Well, one can call this flexibility. Should we migrate more icons to UI.Icon and
see whether we will need 10 more different sizes?

[lushnikov, 2017-03-27 22:07:20]

On 2017/03/25 19:45:56, dgozman wrote:
> Nice idea overall!
> 
> > it discourages abusing of icon sizes - icon could occupy the whole cell only
> Well, one can call this flexibility. Should we migrate more icons to UI.Icon
and
> see whether we will need 10 more different sizes?

It looks like there are two models of managing icons:
- We can have all icons of predefined sizes. In this case it makes sense to
manage them in sprite sheets
- We can have every icon to be of an arbitrary size. In this case, it makes
sense to manage them separately.

Today, we're committed into the first approach, so this patch aims towards this
direction.

https://codereview.chromium.org/2776893002/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/Icon.js (right):

https://codereview.chromium.org/2776893002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/Icon.js:119: 'smallicon-bezier':
{position: 'a5', spritesheet: 'smallicons', isMask: true},
On 2017/03/25 19:44:21, dgozman wrote:
> I think calculations are not equal to previous values:
> 
> a5 -> { -(10 + 10) * 5, (10 + 10) * 1 - 10 }  !== {0, 0}
> 
> Am I missing something?

The formula is tricky: the row is one-based, whereas the column is zero-based.
Let me fix the formula to make it clearer.

[dgozman, 2017-03-27 22:48:28]

lgtm

[lushnikov, 2017-03-27 22:59:35]

The CQ bit was checked by lushnikov@chromium.org

[lushnikov, 2017-03-27 22:59:35]

The patchset sent to the CQ was uploaded after l-g-t-m from dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/2776893002/#ps60001
(title: "make row in formula zero-based")

[commit-bot: I haz the power, 2017-03-27 23:00:12]

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-03-28 00:50:26]

CQ is committing da patch.

Bot data: {"patchset_id": 60001, "attempt_start_ts": 1490655575515410,
"parent_rev": "7055024eeee16a35f5ce7883b70956fbad58ecd8", "commit_rev":
"8c40265f143b45ecc7ddf49aedb363d6c7c70e69"}

[commit-bot: I haz the power, 2017-03-28 00:51:08]

Description was changed from

==========
DevTools: use chess-like icon positions

This patch:
- moves icons from {x, y, width, height} coordinates into
  chess-like coordinates. Position 'a1' means bottom-left corner,
  and position 'a8' means 1st column 8th row.
- removes spritesheet image sizes from inspectorCommon.css. This
  turned out to be possible since icon's background/mask-image
  always have default size of the image.

This solves multiple issues:
- it's easy to convert between icon coordinates and spritesheets.
  Chess-like coordinate systems are embedded into SVGs: 
  http://imgur.com/a/YcSSs
- it discourages abusing of icon sizes - icon could occupy the
  whole cell only
- resizing spritesheet is as easy as changing its size in inkscape

Performance-wise, this change doesn't impact time to create icon in
a noticeble way. Before this patch, creating all 107 icons was
taking ~3ms on my MacBook Pro 2015. With this patch, the time
didn't change.

BUG=700249
R=dgozman
==========

to

==========
DevTools: use chess-like icon positions

This patch:
- moves icons from {x, y, width, height} coordinates into
  chess-like coordinates. Position 'a1' means bottom-left corner,
  and position 'a8' means 1st column 8th row.
- removes spritesheet image sizes from inspectorCommon.css. This
  turned out to be possible since icon's background/mask-image
  always have default size of the image.

This solves multiple issues:
- it's easy to convert between icon coordinates and spritesheets.
  Chess-like coordinate systems are embedded into SVGs: 
  http://imgur.com/a/YcSSs
- it discourages abusing of icon sizes - icon could occupy the
  whole cell only
- resizing spritesheet is as easy as changing its size in inkscape

Performance-wise, this change doesn't impact time to create icon in
a noticeble way. Before this patch, creating all 107 icons was
taking ~3ms on my MacBook Pro 2015. With this patch, the time
didn't change.

BUG=700249
R=dgozman

Review-Url: https://codereview.chromium.org/2776893002
Cr-Commit-Position: refs/heads/master@{#459958}
Committed:
https://chromium.googlesource.com/chromium/src/+/8c40265f143b45ecc7ddf49aedb3...
==========

[commit-bot: I haz the power, 2017-03-28 00:51:09]

Committed patchset #4 (id:60001) as
https://chromium.googlesource.com/chromium/src/+/8c40265f143b45ecc7ddf49aedb3...