Web Inspector: Add grid to images to clarify transparency and image size
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 Jun 2017 00:34:48 +0000 (00:34 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 Jun 2017 00:34:48 +0000 (00:34 +0000)
commit1991739afc9432a90d89b62441a960af84d7899a
treeb17fc9efa2d0fd2fc9730dd8337dca8f232e6b6f
parent9a2255d88c45c255956a92c21bfd9a7a0d0f5b1c
Web Inspector: Add grid to images to clarify transparency and image size
https://bugs.webkit.org/show_bug.cgi?id=173184

Reviewed by Matt Baker.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Base/Setting.js:
Add setting for controlling the image grid.

* UserInterface/Images/NavigationItemCheckers.svg: Added.

* UserInterface/Views/ImageResourceContentView.css:
(.content-view.resource.image):
(.content-view.resource.image img):
Replace the border spacing around the image with padding on the container.  This is required
because a border will extend the area that is effected by `background-image`, meaning that
the checkerboard would appear in that area as well, giving misleading information as to the
size of the image.

* UserInterface/Views/ImageResourceContentView.js:
(WebInspector.ImageResourceContentView):
(WebInspector.ImageResourceContentView.prototype.get navigationItems): Added.
(WebInspector.ImageResourceContentView.prototype.contentAvailable):
(WebInspector.ImageResourceContentView.prototype.shown): Added.
(WebInspector.ImageResourceContentView.prototype._toggleImageGrid): Added.
(WebInspector.ImageResourceContentView.prototype._showGridButtonClicked): Added.
(WebInspector.ImageResourceContentView.prototype.get imageElement): Deleted.
Apply the CSS class for showing the grid when the added navigation item is activated.

* UserInterface/Views/Main.css:
(img.show-grid):
Generates a checkerboard pattern via `background-image` using the following process:
 - four `linear-gradients` are drawn, one in each corner
 - each draws one half of a 20x20 square, specified by `background-size`
 - they are then repositioned using `background-position` so that the two halfs align
    +------+      \--2
    |1 /\ 2|      |\ |
    | /  \ |  =>  | \|
    |/    \|  =>  4--\
    |\    /|  =>      1--/
    | \  / |  =>      | /|
    |4 \/ 3|          |/ |
    +------+          /--3

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@218159 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Images/NavigationItemCheckers.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js
Source/WebInspectorUI/UserInterface/Views/Main.css