New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 700249 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Last visit 29 days ago
Closed: Mar 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Bug



Sign in to add a comment

DevTools: arrange icons into spritesheets by their size

Project Member Reported by lushnikov@chromium.org, Mar 10 2017

Issue description

For the sake of maintainability, we need to arrange icons into
three spritesheets:

- large icons (28x24)
- medium icons (16x16)
- small icons (10x10)

These spritesheets should have a convenient grid, and the UI.Icon should help addressing the icon in a grid.

This should simplify our process of adding/removing icons.
 
Project Member

Comment 1 by bugdroid1@chromium.org, Mar 10 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7c7480d0133cf45df2cc7afe6acb84425678a7af

commit 7c7480d0133cf45df2cc7afe6acb84425678a7af
Author: lushnikov <lushnikov@chromium.org>
Date: Fri Mar 10 20:11:47 2017

DevTools: [Icons] normalize icon sizes

As a result of this patch, we have:
- 65 icons of 28x24 size (belong to "large" icons)
- 24 icons of 10x10 size (belong to "small" icons)

The rest of the icons belong to "medium" icons and will
be normalized to be 16x16.

R=dgozman, pfeldman
BUG= 700249 

Review-Url: https://codereview.chromium.org/2744643003
Cr-Commit-Position: refs/heads/master@{#456146}

[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/console/consoleView.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/data_grid/dataGrid.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/elements/stylesSectionTree.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/network/networkLogView.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/object_ui/customPreviewComponent.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/sources/navigatorTree.css
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
[modify] https://crrev.com/7c7480d0133cf45df2cc7afe6acb84425678a7af/third_party/WebKit/Source/devtools/front_end/ui/viewContainers.css

Project Member

Comment 2 by bugdroid1@chromium.org, Mar 24 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a

commit 0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a
Author: lushnikov <lushnikov@chromium.org>
Date: Fri Mar 24 17:01:15 2017

DevTools: minor cleanup for the icons

This is a minor cleanup for the icons before re-arranging a spritesheets
by their sizes.

This patch:
- kills unused icon from toolbarButtonGlyphs.svg
- kills smallicon-clear-input since its a dupe of smallicon-gray-cross-hover
- kills largeicon-block since it is a left-over after the icon removal
- fixes size of largeicon-chevron to be 28x24

BUG= 700249 
R=dgozman

Review-Url: https://codereview.chromium.org/2775733002
Cr-Commit-Position: refs/heads/master@{#459461}

[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/Images/src/toolbarButtonGlyphs.svg
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs.png
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs_2x.png
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
[modify] https://crrev.com/0b9720c2eb9ba96fb1ca3a22a721ae0bd0b6a25a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js

Project Member

Comment 3 by bugdroid1@chromium.org, Mar 25 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7596046bd145df1b871971eb65f3d97c5b752adc

commit 7596046bd145df1b871971eb65f3d97c5b752adc
Author: lushnikov <lushnikov@chromium.org>
Date: Sat Mar 25 22:42:10 2017

DevTools: re-arrange icons into spritesheets by their size

This patch re-arranges icons into spritesheets by their sizes.
Instead of having three spritesheets:
- smallIcons.svg
- resourceGlyphs.svg
- toolbarButtonGlyphs.svg

We now have another three spritesheets, where icons are put
according to their size:
- smallIcons.svg - 10x10 icons
- mediumIcons.svg - 16x16 icons
- largeIcons.svg - 28x24 icons

Each svg spritesheet has a nice grid which helps to align icons:
http://imgur.com/a/cYFHm

Icon extraction and re-assembling is done via the
http://github.com/aslushnikov/devtools-icon-extractor

Regarding the binary size of all produced PNG assets, this patch
reduces devtools bundle by ~1.5kb.

BUG= 700249 
R=dgozman

Review-Url: https://codereview.chromium.org/2772153002
Cr-Commit-Position: refs/heads/master@{#459660}

[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/BUILD.gn
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/largeIcons.png
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/largeIcons_2x.png
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/mediumIcons.png
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/mediumIcons_2x.png
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/resourceGlyphs.png
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/resourceGlyphs_2x.png
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/smallIcons.png
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/smallIcons_2x.png
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/src/largeIcons.svg
[add] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/src/mediumIcons.svg
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/src/resourceGlyphs.svg
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/src/toolbarButtonGlyphs.svg
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs.png
[delete] https://crrev.com/c654a79ce1533215e2dcad41d5e623d8220d2dd9/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs_2x.png
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
[modify] https://crrev.com/7596046bd145df1b871971eb65f3d97c5b752adc/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css

Project Member

Comment 4 by bugdroid1@chromium.org, Mar 27 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f7c841cfa3015088d90afdbb1fce08223105444d

commit f7c841cfa3015088d90afdbb1fce08223105444d
Author: lushnikov <lushnikov@chromium.org>
Date: Mon Mar 27 22:45:23 2017

DevTools: normalize medium icons

This patch normalizes sizes for mediumicons, making them all 16x16.

This patch is only possible with https://crrev.com/2772153002/: it makes
sure that icons have enough space around and thus could be set more width
and height.

BUG= 700249 
R=dgozman

Review-Url: https://codereview.chromium.org/2776883003
Cr-Commit-Position: refs/heads/master@{#459914}

[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/persistence/PersistenceUtils.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/sources/AdvancedSearchView.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/ui/tabbedPane.css
[modify] https://crrev.com/f7c841cfa3015088d90afdbb1fce08223105444d/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

Project Member

Comment 5 by bugdroid1@chromium.org, Mar 28 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8c40265f143b45ecc7ddf49aedb363d6c7c70e69

commit 8c40265f143b45ecc7ddf49aedb363d6c7c70e69
Author: lushnikov <lushnikov@chromium.org>
Date: Tue Mar 28 00:50:21 2017

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}

[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/Images/src/largeIcons.svg
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/Images/src/mediumIcons.svg
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
[modify] https://crrev.com/8c40265f143b45ecc7ddf49aedb363d6c7c70e69/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css

Status: Fixed (was: Assigned)
Considering icons in devtools to be solved!

Sign in to add a comment