Skip to content

GitLab

T
tangled
Commit 26ce0876 authored by Alex Rudenko's avatar Alex Rudenko Committed by Commit Bot
Browse files
Options

Intergrate DevTools resources into inspector agent 

Inspector resources have been moved to DevTools[1]. This CL integrates
all inspector resources with the inspector overlay agent.

[1] https://crrev.com/c/2226560

Bug: 1078267
Change-Id: Ia0f8df3181bfc428df1e3222de070aa814523ede
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2228551Reviewed-by: default avatarMathias Bynens <mathias@chromium.org>
Reviewed-by: default avatarPeter Marshall <petermarshall@chromium.org>
Reviewed-by: default avatarJochen Eisinger <jochen@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Cr-Commit-Position: refs/heads/master@{#774607}
parent 14acac2a
Hide whitespace changes
Inline Side-by-side
Showing with 14 additions and 527 deletions
third_party/blink/public/blink_resources.grd
View file @ 26ce0876
......@@ -31,12 +31,6 @@
<include name="IDR_UASTYLE_XHTMLMP_CSS" file="../renderer/core/css/xhtmlmp.css" type="BINDATA" compress="gzip"/>
<include name="IDR_UASTYLE_VIEWPORT_ANDROID_CSS" file="../renderer/core/css/viewportAndroid.css" type="BINDATA" compress="gzip"/>
<include name="IDR_UASTYLE_VIEWPORT_TELEVISION_CSS" file="../renderer/core/css/viewportTelevision.css" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_COMMON_JS" file="../renderer/core/inspector/inspect_tool_common.js" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_COMMON_CSS" file="../renderer/core/inspector/inspect_tool_common.css" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_DISTANCES_HTML" file="../renderer/core/inspector/inspect_tool_distances.html" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_PAUSED_HTML" file="../renderer/core/inspector/inspect_tool_paused.html" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_VIEWPORT_SIZE_HTML" file="../renderer/core/inspector/inspect_tool_viewport_size.html" type="BINDATA" compress="gzip"/>
<include name="IDR_INSPECT_TOOL_SCREENSHOT_HTML" file="../renderer/core/inspector/inspect_tool_screenshot.html" type="BINDATA" compress="gzip"/>
<include name="IDR_DOCUMENTXMLTREEVIEWER_CSS" file="../renderer/core/xml/DocumentXMLTreeViewer.css" type="BINDATA" compress="gzip"/>
<include name="IDR_DOCUMENTXMLTREEVIEWER_JS" file="../renderer/core/xml/DocumentXMLTreeViewer.js" type="BINDATA" compress="gzip"/>
<include name="IDR_VALIDATION_BUBBLE_ICON" file="../renderer/core/html/forms/resources/input_alert.svg" type="BINDATA" compress="gzip"/>
......
third_party/blink/renderer/core/inspector/inspect_tool_common.css deleted 100644 → 0
View file @ 14acac2a
/*
* Copyright 2019 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
body {
margin: 0;
padding: 0;
font-size: 13px;
color: #222;
}
body.platform-linux {
font-family: Roboto, Ubuntu, Arial, sans-serif;
}
body.platform-mac {
color: rgb(48, 57, 66);
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
body.platform-windows {
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.fill {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#canvas {
pointer-events: none;
}
.hidden {
display: none !important;
}
third_party/blink/renderer/core/inspector/inspect_tool_common.js deleted 100644 → 0
View file @ 14acac2a
// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
window.viewportSize = {width: 800, height: 600};
window.deviceScaleFactor = 1;
window.emulationScaleFactor = 1;
window.pageScaleFactor = 1;
window.pageZoomFactor = 1;
window.scrollX = 0;
window.scrollY = 0;
function reset(resetData) {
window.viewportSize = resetData.viewportSize;
window.deviceScaleFactor = resetData.deviceScaleFactor;
window.pageScaleFactor = resetData.pageScaleFactor;
window.pageZoomFactor = resetData.pageZoomFactor;
window.emulationScaleFactor = resetData.emulationScaleFactor;
window.scrollX = Math.round(resetData.scrollX);
window.scrollY = Math.round(resetData.scrollY);
window.canvas = document.getElementById('canvas');
if (window.canvas) {
window.canvas.width = deviceScaleFactor * viewportSize.width;
window.canvas.height = deviceScaleFactor * viewportSize.height;
window.canvas.style.width = viewportSize.width + 'px';
window.canvas.style.height = viewportSize.height + 'px';
window.context = canvas.getContext('2d');
window.context.scale(deviceScaleFactor, deviceScaleFactor);
window.canvasWidth = viewportSize.width;
window.canvasHeight = viewportSize.height;
}
doReset();
}
function doReset() { }
function setPlatform(platform) {
window.platform = platform;
document.body.classList.add('platform-' + platform);
}
function dispatch(message) {
const functionName = message.shift();
window[functionName].apply(null, message);
}
function log(text) {
let element = document.getElementById('log');
if (!element) {
element = document.body.createChild();
element.id = 'log';
}
element.createChild('div').textContent = text;
}
function eventHasCtrlOrMeta(event) {
return window.platform == 'mac' ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
}
Element.prototype.createChild = function(tagName, className) {
const element = createElement(tagName, className);
element.addEventListener('click', function(e) { e.stopPropagation(); }, false);
this.appendChild(element);
return element;
}
Element.prototype.createTextChild = function(text) {
const element = document.createTextNode(text);
this.appendChild(element);
return element;
}
Element.prototype.removeChildren = function()
{
if (this.firstChild)
this.textContent = '';
}
function createElement(tagName, className)
{
const element = document.createElement(tagName);
if (className)
element.className = className;
return element;
}
String.prototype.trimEnd = function(maxLength)
{
if (this.length <= maxLength)
return String(this);
return this.substr(0, maxLength - 1) + '\u2026';
}
/**
* @param {number} num
* @param {number} min
* @param {number} max
* @return {number}
*/
Number.constrain = function(num, min, max) {
if (num < min)
num = min;
else if (num > max)
num = max;
return num;
};
third_party/blink/renderer/core/inspector/inspect_tool_distances.html deleted 100644 → 0
View file @ 14acac2a
<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<script>
/**
* @param {!Object} data
*/
function drawDistances(data)
{
const info = data['distanceInfo'];
if (!info)
return;
const rect = quadToRect(getVisualQuad(info));
const context = window.context;
context.save();
context.strokeStyle = '#ccc';
for (const box of info['boxes'])
context.strokeRect(box[0], box[1], box[2], box[3]);
context.strokeStyle = '#f00';
context.lineWidth = 1;
context.rect(rect.x - 0.5, rect.y - 0.5, rect.w + 1, rect.h + 1);
context.stroke();
context.restore();
}
/**
* @param {!Object} data
* @return {!Array<number>}
*/
function getVisualQuad(data) {
const style = data['style'];
if (shouldUseVisualBorder(style))
return data['border'];
else if (ShouldUseVisualPadding(style))
return data['padding'];
return data['content'];
/**
* @param {!Object} style
* @return {boolean}
*/
function shouldUseVisualBorder(style) {
const sides = ['top', 'right', 'bottom', 'left'];
for (const side of sides) {
const border_width = style[`border-${side}-width`];
const border_style = style[`border-${side}-style`];
const border_color = style[`border-${side}-color`];
if (border_width != '0px' && border_style != 'none' &&
!border_color.endsWith('00'))
return true;
}
const outline_width = style['outline-width'];
const outline_style = style['outline-style'];
const outline_color = style['outline-color'];
if (outline_width != '0px' && outline_style != 'none' &&
!outline_color.endsWith('00'))
return true;
const box_shadow = style['box-shadow'];
if (box_shadow != 'none')
return true;
return false;
}
/**
* @param {!Object} style
* @return {boolean}
*/
function ShouldUseVisualPadding(style) {
const bg_color = style['background-color'];
const bg_image = style['background-image'];
if (!bg_color.startsWith('#FFFFFF') && !bg_color.endsWith('00'))
return true;
if (bg_image != 'none')
return true;
return false;
}
}
/**
* @param {!Array<number>} quad
* @return {!Object}
*/
function quadToRect(quad) {
return {
x: quad[0],
y: quad[1],
w: quad[4] - quad[0],
h: quad[5] - quad[1]
}
}
</script>
</head>
<body class="fill">
<canvas id="canvas" class="fill"></canvas>
</body>
</html>
third_party/blink/renderer/core/inspector/inspect_tool_paused.html deleted 100644 → 0
View file @ 14acac2a
<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<script src="inspect_tool_common.js"></script>
<link rel="stylesheet" href="inspect_tool_common.css">
<style>
body {
background-color: rgba(0, 0, 0, 0.31);
}
.controls-line {
display: flex;
justify-content: center;
margin: 10px 0;
}
.message-box {
padding: 2px 4px;
display: flex;
align-items: center;
cursor: default;
overflow: hidden;
}
#paused-in-debugger {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.controls-line > * {
background-color: rgb(255, 255, 194);
border: 1px solid rgb(202, 202, 202);
height: 22px;
box-sizing: border-box;
}
.controls-line .button {
width: 26px;
margin-left: -1px;
margin-right: 0;
padding: 0;
flex-shrink: 0;
flex-grow: 0;
cursor: pointer;
}
.controls-line .button .glyph {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
opacity: 0.8;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
position: relative;
}
.controls-line .button:active .glyph {
top: 1px;
left: 1px;
}
#resume-button .glyph {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVohVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAAAASUVORK5CYII=);
-webkit-mask-size: 13px 10px;
background-color: rgb(66, 129, 235);
}
#step-over-button .glyph {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
-webkit-mask-size: 18px 10px;
}
</style>
<script>
function drawPausedInDebuggerMessage(message) {
document.getElementById("paused-in-debugger").textContent = message;
}
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("resume-button").addEventListener("click", () => InspectorOverlayHost.send("resume"));
document.getElementById("step-over-button").addEventListener("click", () => InspectorOverlayHost.send("stepOver"));
});
document.addEventListener("keydown", event => {
if (event.key == "F8" || eventHasCtrlOrMeta(event) && event.keyCode == 220 /* backslash */)
InspectorOverlayHost.send("resume");
else if (event.key == "F10" || eventHasCtrlOrMeta(event) && event.keyCode == 222 /* single quote */)
InspectorOverlayHost.send("stepOver");
});
</script>
</head>
<body class="fill">
<div class="controls-line">
<div class="message-box"><div id="paused-in-debugger"></div></div>
<div class="button" id="resume-button" title="Resume script execution (F8)."><div class="glyph"></div></div>
<div class="button" id="step-over-button" title="Step over next function call (F10)."><div class="glyph"></div></div>
</div>
</body>
</html>
third_party/blink/renderer/core/inspector/inspect_tool_screenshot.html deleted 100644 → 0
View file @ 14acac2a
<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<script src="inspect_tool_common.js"></script>
<link rel="stylesheet" href="inspect_tool_common.css">
<style>
body {
cursor: crosshair;
}
#zone {
background-color: #0003;
border: 1px solid #fffd;
display: none;
position: absolute;
}
</style>
<script>
let anchor = null;
let position = null;
function currentRect() {
return {
x: Math.min(anchor.x, position.x),
y: Math.min(anchor.y, position.y),
width: Math.abs(anchor.x - position.x),
height: Math.abs(anchor.y - position.y)
};
}
function updateZone()
{
const zone = document.getElementById('zone');
if (!position || !anchor) {
zone.style.display = 'none';
return;
}
zone.style.display = 'block';
const rect = currentRect();
zone.style.left = rect.x + 'px';
zone.style.top = rect.y + 'px';
zone.style.width = rect.width + 'px';
zone.style.height = rect.height + 'px';
}
function cancel() {
anchor = null;
position = null;
}
function loaded() {
document.documentElement.addEventListener('mousedown', event => {
anchor = { x: event.pageX, y: event.pageY };
position = anchor;
updateZone();
event.stopPropagation();
event.preventDefault();
}, true);
document.documentElement.addEventListener('mouseup', event => {
if (anchor && position) {
const rect = currentRect();
if (rect.width >= 5 && rect.height >= 5)
InspectorOverlayHost.send(JSON.stringify(rect));
}
cancel();
updateZone();
event.stopPropagation();
event.preventDefault();
}, true);
document.documentElement.addEventListener('mousemove', event => {
if (anchor && event.buttons === 1)
position = { x: event.pageX, y: event.pageY };
else
anchor = null;
updateZone();
event.stopPropagation();
event.preventDefault();
}, true);
document.documentElement.addEventListener('keydown', event => {
if (anchor && event.key === 'Escape') {
cancel();
updateZone();
event.stopPropagation();
event.preventDefault();
}
}, true);
}
</script>
</head>
<body class="fill" onload="loaded()">
<div id="zone"></div>
</body>
</html>
third_party/blink/renderer/core/inspector/inspect_tool_viewport_size.html deleted 100644 → 0
View file @ 14acac2a
<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<script>
const darkGridColor = "rgba(0,0,0,0.7)";
const gridBackgroundColor = "rgba(255, 255, 255, 0.8)";
function drawViewSize()
{
const text = `${viewportSize.width}px \u00D7 ${viewportSize.height}px`;
context.save();
context.font = `14px ${window.getComputedStyle(document.body).fontFamily}`;
const textWidth = context.measureText(text).width;
context.fillStyle = gridBackgroundColor;
context.fillRect(canvasWidth - textWidth - 12, 0, canvasWidth, 25);
context.fillStyle = darkGridColor;
context.fillText(text, canvasWidth - textWidth - 6, 18);
context.restore();
}
</script>
</head>
<body class="fill">
<canvas id="canvas" class="fill"></canvas>
</body>
</html>
third_party/blink/renderer/core/inspector/inspect_tools.cc
View file @ 26ce0876
......@@ -9,7 +9,7 @@
#include "third_party/blink/public/common/input/web_keyboard_event.h"
#include "third_party/blink/public/common/input/web_pointer_event.h"
#include "third_party/blink/public/platform/web_input_event_result.h"
#include "third_party/blink/public/resources/grit/blink_resources.h"
#include "third_party/blink/public/resources/grit/inspector_overlay_resources_map.h"
#include "third_party/blink/renderer/core/css/css_color_value.h"
#include "third_party/blink/renderer/core/css/css_computed_style_declaration.h"
#include "third_party/blink/renderer/core/display_lock/display_lock_utilities.h"
......@@ -351,7 +351,7 @@ void NodeHighlightTool::Trace(Visitor* visitor) const {
// NearbyDistanceTool ----------------------------------------------------------
int NearbyDistanceTool::GetDataResourceId() {
return IDR_INSPECT_TOOL_DISTANCES_HTML;
return IDR_INSPECT_TOOL_DISTANCES_JS;
}
bool NearbyDistanceTool::HandleMouseDown(const WebMouseEvent& event,
......@@ -421,7 +421,7 @@ void ShowViewSizeTool::Draw(float scale) {
}
int ShowViewSizeTool::GetDataResourceId() {
return IDR_INSPECT_TOOL_VIEWPORT_SIZE_HTML;
return IDR_INSPECT_TOOL_VIEWPORT_SIZE_JS;
}
bool ShowViewSizeTool::ForwardEventsToOverlay() {
......@@ -438,7 +438,7 @@ void ScreenshotTool::DoInit() {
}
int ScreenshotTool::GetDataResourceId() {
return IDR_INSPECT_TOOL_SCREENSHOT_HTML;
return IDR_INSPECT_TOOL_SCREENSHOT_JS;
}
void ScreenshotTool::Dispatch(const String& message) {
......@@ -521,7 +521,7 @@ void ScreenshotTool::Dispatch(const String& message) {
// PausedInDebuggerTool --------------------------------------------------------
int PausedInDebuggerTool::GetDataResourceId() {
return IDR_INSPECT_TOOL_PAUSED_HTML;
return IDR_INSPECT_TOOL_PAUSED_JS;
}
void PausedInDebuggerTool::Draw(float scale) {
......
third_party/blink/renderer/core/inspector/inspector_overlay_agent.cc
View file @ 26ce0876
......@@ -38,7 +38,6 @@
#include "third_party/blink/public/platform/platform.h"
#include "third_party/blink/public/platform/task_type.h"
#include "third_party/blink/public/platform/web_data.h"
#include "third_party/blink/public/resources/grit/blink_resources.h"
#include "third_party/blink/public/resources/grit/inspector_overlay_resources_map.h"
#include "third_party/blink/public/web/web_widget_client.h"
#include "third_party/blink/renderer/bindings/core/v8/sanitize_script_errors.h"
......@@ -1017,25 +1016,13 @@ void InspectorOverlayAgent::LoadFrameForTool(int data_resource_id) {
frame->View()->SetBaseBackgroundColor(Color::kTransparent);
scoped_refptr<SharedBuffer> data = SharedBuffer::Create();
// TODO(crbug.com/1078267): migrate all inspector tools
if (frame_resource_name_ == IDR_INSPECT_TOOL_HIGHLIGHT_JS) {
// New source of overlay resources.
data->Append("<style>", static_cast<size_t>(7));
data->Append(UncompressResourceAsBinary(IDR_INSPECT_COMMON_CSS));
data->Append("</style>", static_cast<size_t>(8));
data->Append("<script>", static_cast<size_t>(8));
data->Append(UncompressResourceAsBinary(frame_resource_name_));
data->Append("</script>", static_cast<size_t>(9));
} else {
// Old source of resources.
data->Append("<style>", static_cast<size_t>(7));
data->Append(UncompressResourceAsBinary(IDR_INSPECT_TOOL_COMMON_CSS));
data->Append("</style>", static_cast<size_t>(8));
data->Append("<script>", static_cast<size_t>(8));
data->Append(UncompressResourceAsBinary(IDR_INSPECT_TOOL_COMMON_JS));
data->Append("</script>", static_cast<size_t>(9));
data->Append(UncompressResourceAsBinary(frame_resource_name_));
}
data->Append("<style>", static_cast<size_t>(7));
data->Append(UncompressResourceAsBinary(IDR_INSPECT_COMMON_CSS));
data->Append("</style>", static_cast<size_t>(8));
data->Append("<script>", static_cast<size_t>(8));
data->Append(UncompressResourceAsBinary(frame_resource_name_));
data->Append("</script>", static_cast<size_t>(9));
frame->ForceSynchronousDocumentInstall("text/html", data);
......@@ -1058,6 +1045,8 @@ void InspectorOverlayAgent::LoadFrameForTool(int data_resource_id) {
EvaluateInOverlay("setPlatform", "mac");
#elif defined(OS_POSIX)
EvaluateInOverlay("setPlatform", "linux");
#else
EvaluateInOverlay("setPlatform", "other");
#endif
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment