DevTools: introduce spritesheet assembler.

DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- extracts all 103 icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of https://aslushnikov.github.io/devtools-icon-extractor/

- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at https://aslushnikov.github.io/bin-packing/

- builds a sprite sheet out of icons and generates ui/GeneratedIconDescriptors.js file which
  describes positions of icons

- migrates UI.Icon onto the new spritesheet.

With this patch, adding and using a new icon is a bliss:
1. Drop a new SVG file in Images/icons
2. Optionally add a '-mask' suffix to the icon name to designate that it's a mask image
3. Run scripts/assemble_spritesheet.js to generate new spritesheets.
4. Use icon in the code via UI.Icon.create('icon-name')

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org

[lushnikov, 2017-02-07 03:08:24]

Description was changed from

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
one.

This patch:
- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- extracts all the icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files. This was done with the
  help of https://aslushnikov.github.io/devtools-icon-extractor/

- migrates UI.Icon over to the new spritesheet.

BUG=689188
R=pfeldman@chromium.org
==========

to

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
one.

This patch:
- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- extracts all the icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- migrates UI.Icon over to the new spritesheet.


With this patch, adding a new icon should be just:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.


BUG=689188
R=pfeldman@chromium.org
==========

[lushnikov, 2017-02-07 03:09:00]

Note: this patch keeps the Images/src/icons_spritesheet.svg checked in the
source base. This is to aid debugging of SVG rasterization issues.

Please, take a look!

[lushnikov, 2017-02-07 03:55:09]

Description was changed from

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
one.

This patch:
- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- extracts all the icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- migrates UI.Icon over to the new spritesheet.


With this patch, adding a new icon should be just:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.


BUG=689188
R=pfeldman@chromium.org
==========

to

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- extracts all the icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- migrates UI.Icon over to the new spritesheet.

With this patch, adding a new icon should be just:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org
==========

[lushnikov, 2017-02-07 03:55:22]

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

[commit-bot: I haz the power, 2017-02-07 03:55:48]

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-02-07 05:37:30]

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

[commit-bot: I haz the power, 2017-02-07 05:37:31]

Dry run: Try jobs failed on following builders:
  win_chromium_rel_ng on master.tryserver.chromium.win (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_...)

[lushnikov, 2017-02-07 06:54:14]

Description was changed from

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- extracts all the icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- migrates UI.Icon over to the new spritesheet.

With this patch, adding a new icon should be just:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org
==========

to

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- extracts all 103 icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- builds a sprite sheet out of icons and generates
ui/GeneratedIconDescriptors.js file which
  describes positions of icons

- migrates UI.Icon onto the new spritesheet.

With this patch, adding a new icon is a bliss:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org
==========

[lushnikov, 2017-02-07 07:36:44]

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

[commit-bot: I haz the power, 2017-02-07 07:37:00]

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

[lushnikov, 2017-02-07 09:37:49]

Description was changed from

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- extracts all 103 icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- builds a sprite sheet out of icons and generates
ui/GeneratedIconDescriptors.js file which
  describes positions of icons

- migrates UI.Icon onto the new spritesheet.

With this patch, adding a new icon is a bliss:
1. Drop a new SVG file in Images/icons
2. Run scripts/assemble_spritesheet.js to generate new spritesheets.

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org
==========

to

==========
DevTools: introduce spritesheet assembler.

This patch introduces SpriteSheet assembler and moves UI.Icon to use
generated spritesheet.

This patch:
- extracts all 103 icons from toolbarButtonGlyphs.svg, smallIcons.svg and
  resourceGlyphs.svg into a separate SVG files under Images/icons.
  This was done with the help of
https://aslushnikov.github.io/devtools-icon-extractor/

- introduces sprite sheet assembler. The spritesheet assembler could be
  found under devtools/scripts/spritesheet_assembler. The demo of the
  spritesheet packing algorithm could be found at
https://aslushnikov.github.io/bin-packing/

- builds a sprite sheet out of icons and generates
ui/GeneratedIconDescriptors.js file which
  describes positions of icons

- migrates UI.Icon onto the new spritesheet.

With this patch, adding and using a new icon is a bliss:
1. Drop a new SVG file in Images/icons
2. Optionally add a '-mask' suffix to the icon name to designate that it's a
mask image
3. Run scripts/assemble_spritesheet.js to generate new spritesheets.
4. Use icon in the code via UI.Icon.create('icon-name')

Regarding the file size, both icons_spritesheet[_2x].png weight 1.5Kb less then
smallIcons[_2x].png + resourceGlyphs[_2x].png + toolbarButtonGlyphs[_2x].png.

BUG=689188
R=pfeldman@chromium.org
==========

[commit-bot: I haz the power, 2017-02-07 11:34:40]

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

[commit-bot: I haz the power, 2017-02-07 11:34:41]

Dry run: This issue passed the CQ dry run.

[pfeldman, 2017-02-07 19:04:21]

I think it is a step back:
- it makes me create new svg file every time,
- it is hard to see if the icon i intend to create already exists,
- it introduces the unnecessary manual build step that produces source from
source - currently we can at least potentially use svg file as a sprite.

[lushnikov, 2017-02-07 19:46:05]

What do you think would be a step forward? I'd like to be able to
easily add icons.

On 2017/02/07 19:04:21, pfeldman wrote:
> I think it is a step back:
> - it makes me create new svg file every time,
Nowadays our icons come either from go/icons or from Chris - so we start with a
file
in the first place.

> - it is hard to see if the icon i intend to create already exists,
All the icons are present at Images/icons_spritesheet_2x.png or
Images/src/icons_spritesheet.svg

> - it introduces the unnecessary manual build step that produces source from
> source - currently we can at least potentially use svg file as a sprite.
It doesn't introduce any new step - we already have convert_svg_to_png. I can
inline
assemble_spritesheet.js into the script so that nothing would change for the
team workflow.

[lushnikov, 2017-02-21 03:07:25]

For the record: after offline discussion we decided not to proceed with this
approach. Sprite sheet assembler work got moved to the github project:
https://github.com/aslushnikov/spritesheet-assembler/