Attachment #312564 for bug #173184

View Details Raw Unified Return to Bug 173184

| Differences between



2017-06-09  Devin Rousso  <drousso@apple.com>

        Web Inspector: Add grid to images to clarify transparency and image size
        https://bugs.webkit.org/show_bug.cgi?id=173184

        Reviewed by NOBODY (OOPS!).

        * 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

2017-06-07  Devin Rousso  <drousso@apple.com>

        Web Inspector: Add ContextMenu item to log WebSocket object to console



localizedStrings["Heading Level"] = "Heading Level";
localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
localizedStrings["Height"] = "Height";
localizedStrings["Hide Grid"] = "Hide Grid";
localizedStrings["Hide compositing borders"] = "Hide compositing borders";
localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";

localizedStrings["Show All"] = "Show All";
localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
localizedStrings["Show Console tab"] = "Show Console tab";
localizedStrings["Show Grid"] = "Show Grid";
localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
localizedStrings["Show Source"] = "Show Source";

Lines 120-123 WebInspector.settings = { a/Source/WebInspectorUI/UserInterface/Base/Setting.js_sec1
- a/Source/WebInspectorUI/UserInterface/Base/Setting.js +1 lines
120	stylesInsertNewline: new WebInspector.Setting("styles-insert-newline", true),	120	stylesInsertNewline: new WebInspector.Setting("styles-insert-newline", true),
121	stylesSelectOnFirstClick: new WebInspector.Setting("styles-select-on-first-click", true),	121	stylesSelectOnFirstClick: new WebInspector.Setting("styles-select-on-first-click", true),
122	showScopeChainOnPause: new WebInspector.Setting("show-scope-chain-sidebar", true),	122	showScopeChainOnPause: new WebInspector.Setting("show-scope-chain-sidebar", true),
		123	showImageGrid: new WebInspector.Setting("show-image-grid", false),
123	};	124	};

Line 0 a/Source/WebInspectorUI/UserInterface/Images/NavigationItemCheckers.svg_sec1
- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemCheckers.svg +7 lines
	1	<?xml version="1.0" encoding="utf-8"?>
	2	<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
	3	<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
	4	<rect fill="none" stroke="currentColor" stroke-width="1" x="0.5" y="0.5" width="12" height="12"/>
	5	<rect fill="currentColor" opacity="0.5" x="1" y="1" width="5.5" height="5.5"/>
	6	<rect fill="currentColor" opacity="0.5" x="6.5" y="6.5" width="5.5" height="5.5"/>
	7	</svg>

Lines 32-37 a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css_sec1
- a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css -4 / +3 lines
32	display: flex;	32	display: flex;
33		33
34	justify-content: center;	34	justify-content: center;
		35	align-items: center;
		36
		37	padding: 15px;
35	}	38	}
36		39
37	.content-view.resource.image img {	40	.content-view.resource.image img {
Lines 41-49 a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css_sec2
41	-webkit-user-select: text;	44	-webkit-user-select: text;
42	-webkit-user-drag: auto;	45	-webkit-user-drag: auto;
43		46
44	/* A border is used instead of padding or margin so when there is overflow
45	there will be space on all sides. */
46	border: 15px solid transparent;
47
48	margin: auto 0;	47	margin: auto 0;
49	}	48	}



        super(resource, "image");

        this._imageElement = null;

        const toolTip = WebInspector.UIString("Show Grid");
        const activatedToolTip = WebInspector.UIString("Hide Grid");
        this._showGridButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-grid", toolTip, activatedToolTip, "Images/NavigationItemCheckers.svg", 13, 13);
        this._showGridButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
        this._showGridButtonNavigationItem.activated = !!WebInspector.settings.showImageGrid.value;
    }

    // Public

    get navigationItems()
    {
        return [this._showGridButtonNavigationItem];
    }

    contentAvailable(content, base64Encoded)

        this._imageElement.addEventListener("load", function() { URL.revokeObjectURL(objectURL); });
        this._imageElement.src = objectURL;
        this._imageElement.setAttribute("filename", this.resource.urlComponents.lastPathComponent || "");
        this._toggleImageGrid();

        this.element.appendChild(this._imageElement);
    }

    // Protected

    shown()
    {
        super.shown();

        this._toggleImageGrid();
    }

    // Private

    _toggleImageGrid()
    {
        if (!this._imageElement)
            return;

        let activated = this._showGridButtonNavigationItem.activated;
        
        this._imageElement.classList.toggle("show-grid", activated);
    }

    _showGridButtonClicked(event)
    {
        WebInspector.settings.showImageGrid.value = this._showGridButtonNavigationItem.activated = !this._showGridButtonNavigationItem.activated;

        this._toggleImageGrid();
    }
};



        opacity: 0;
    }
}

img.show-grid {
    background-image: linear-gradient(315deg, transparent 75%, hsl(0, 0%, 95%) 75%),
                      linear-gradient(45deg, transparent 75%, hsl(0, 0%, 95%) 75%),
                      linear-gradient(315deg, hsl(0, 0%, 95%) 25%, transparent 25%),
                      linear-gradient(45deg, hsl(0, 0%, 95%) 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
}

Return to Bug 173184

Lines 407-409 body[dir=rtl] .go-to-link:not(.dont-float) { a/Source/WebInspectorUI/UserInterface/Views/Main.css_sec1
- a/Source/WebInspectorUI/UserInterface/Views/Main.css +9 lines
407	opacity: 0;	407	opacity: 0;
408	}	408	}
409	}	409	}
		410
		411	img.show-grid {
		412	background-image: linear-gradient(315deg, transparent 75%, hsl(0, 0%, 95%) 75%),
		413	linear-gradient(45deg, transparent 75%, hsl(0, 0%, 95%) 75%),
		414	linear-gradient(315deg, hsl(0, 0%, 95%) 25%, transparent 25%),
		415	linear-gradient(45deg, hsl(0, 0%, 95%) 25%, transparent 25%);
		416	background-size: 20px 20px;
		417	background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
		418	}

Lines 1-3 a/Source/WebInspectorUI/ChangeLog_sec1
- a/Source/WebInspectorUI/ChangeLog +47 lines
		1	2017-06-09 Devin Rousso <drousso@apple.com>
		2
		3	Web Inspector: Add grid to images to clarify transparency and image size
		4	https://bugs.webkit.org/show_bug.cgi?id=173184
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* Localizations/en.lproj/localizedStrings.js:
		9
		10	* UserInterface/Base/Setting.js:
		11	Add setting for controlling the image grid.
		12
		13	* UserInterface/Images/NavigationItemCheckers.svg: Added.
		14
		15	* UserInterface/Views/ImageResourceContentView.css:
		16	(.content-view.resource.image):
		17	(.content-view.resource.image img):
		18	Replace the border spacing around the image with padding on the container. This is required
		19	because a border will extend the area that is effected by `background-image`, meaning that
		20	the checkerboard would appear in that area as well, giving misleading information as to the
		21	size of the image.
		22
		23	* UserInterface/Views/ImageResourceContentView.js:
		24	(WebInspector.ImageResourceContentView):
		25	(WebInspector.ImageResourceContentView.prototype.get navigationItems): Added.
		26	(WebInspector.ImageResourceContentView.prototype.contentAvailable):
		27	(WebInspector.ImageResourceContentView.prototype.shown): Added.
		28	(WebInspector.ImageResourceContentView.prototype._toggleImageGrid): Added.
		29	(WebInspector.ImageResourceContentView.prototype._showGridButtonClicked): Added.
		30	(WebInspector.ImageResourceContentView.prototype.get imageElement): Deleted.
		31	Apply the CSS class for showing the grid when the added navigation item is activated.
		32
		33	* UserInterface/Views/Main.css:
		34	(img.show-grid):
		35	Generates a checkerboard pattern via `background-image` using the following process:
		36	- four `linear-gradients` are drawn, one in each corner
		37	- each draws one half of a 20x20 square, specified by `background-size`
		38	- they are then repositioned using `background-position` so that the two halfs align
		39	+------+ \--2
		40	\|1 /\ 2\| \|\ \|
		41	\| / \ \| => \| \\|
		42	\|/ \\| => 4--\
		43	\|\ /\| => 1--/
		44	\| \ / \| => \| /\|
		45	\|4 \/ 3\| \|/ \|
		46	+------+ /--3
		47
1	2017-06-07 Devin Rousso <drousso@apple.com>	48	2017-06-07 Devin Rousso <drousso@apple.com>
2		49
3	Web Inspector: Add ContextMenu item to log WebSocket object to console	50	Web Inspector: Add ContextMenu item to log WebSocket object to console

Lines 428-433 localizedStrings["HTTP"] = "HTTP"; a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js_sec1
- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js +2 lines
428	localizedStrings["Heading Level"] = "Heading Level";	428	localizedStrings["Heading Level"] = "Heading Level";
429	localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";	429	localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
430	localizedStrings["Height"] = "Height";	430	localizedStrings["Height"] = "Height";
		431	localizedStrings["Hide Grid"] = "Hide Grid";
431	localizedStrings["Hide compositing borders"] = "Hide compositing borders";	432	localizedStrings["Hide compositing borders"] = "Hide compositing borders";
432	localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";	433	localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
433	localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";	434	localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";
Lines 748-753 localizedStrings["Show %d More"] = "Show %d More"; a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js_sec2
748	localizedStrings["Show All"] = "Show All";	749	localizedStrings["Show All"] = "Show All";
749	localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";	750	localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
750	localizedStrings["Show Console tab"] = "Show Console tab";	751	localizedStrings["Show Console tab"] = "Show Console tab";
		752	localizedStrings["Show Grid"] = "Show Grid";
751	localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";	753	localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
752	localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";	754	localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
753	localizedStrings["Show Source"] = "Show Source";	755	localizedStrings["Show Source"] = "Show Source";

Lines 30-42 WebInspector.ImageResourceContentView = class ImageResourceContentView extends W a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js_sec1
- a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js -2 / +37 lines
30	super(resource, "image");	30	super(resource, "image");
31		31
32	this._imageElement = null;	32	this._imageElement = null;
		33
		34	const toolTip = WebInspector.UIString("Show Grid");
		35	const activatedToolTip = WebInspector.UIString("Hide Grid");
		36	this._showGridButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-grid", toolTip, activatedToolTip, "Images/NavigationItemCheckers.svg", 13, 13);
		37	this._showGridButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
		38	this._showGridButtonNavigationItem.activated = !!WebInspector.settings.showImageGrid.value;
33	}	39	}
34		40
35	// Public	41	// Public
36		42
37	get imageElement()	43	get navigationItems()
38	{	44	{
39	return this._imageElement;	45	return [this._showGridButtonNavigationItem];
40	}	46	}
41		47
42	contentAvailable(content, base64Encoded)	48	contentAvailable(content, base64Encoded)
Lines 53-59 WebInspector.ImageResourceContentView = class ImageResourceContentView extends W a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js_sec2
53	this._imageElement.addEventListener("load", function() { URL.revokeObjectURL(objectURL); });	59	this._imageElement.addEventListener("load", function() { URL.revokeObjectURL(objectURL); });
54	this._imageElement.src = objectURL;	60	this._imageElement.src = objectURL;
55	this._imageElement.setAttribute("filename", this.resource.urlComponents.lastPathComponent \|\| "");	61	this._imageElement.setAttribute("filename", this.resource.urlComponents.lastPathComponent \|\| "");
		62	this._toggleImageGrid();
56		63
57	this.element.appendChild(this._imageElement);	64	this.element.appendChild(this._imageElement);
58	}	65	}
		66
		67	// Protected
		68
		69	shown()
		70	{
		71	super.shown();
		72
		73	this._toggleImageGrid();
		74	}
		75
		76	// Private
		77
		78	_toggleImageGrid()
		79	{
		80	if (!this._imageElement)
		81	return;
		82
		83	let activated = this._showGridButtonNavigationItem.activated;
		84
		85	this._imageElement.classList.toggle("show-grid", activated);
		86	}
		87
		88	_showGridButtonClicked(event)
		89	{
		90	WebInspector.settings.showImageGrid.value = this._showGridButtonNavigationItem.activated = !this._showGridButtonNavigationItem.activated;
		91
		92	this._toggleImageGrid();
		93	}
59	};	94	};