Skip to content

GitLab

T
tangled
Commit 9e5619a8 authored by Nasko Oskov's avatar Nasko Oskov Committed by Commit Bot
Browse files
Options

Create basic structure with panes for process-internals. 

This CL borrows code and layout from chrome://inspect to allow us to have
multiple ways to view internals of the process model. Subsequent CLs
will fill in the actual data on those extra panes.

Bug: 850087
Change-Id: Ia2891804dd61346e86c44c4aca32daf57302aed4
Reviewed-on: https://chromium-review.googlesource.com/c/1255599
Commit-Queue: Nasko Oskov <nasko@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596347}
parent 6eedda67
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 6 deletions
content/browser/process_internals/process_internals_ui.cc
View file @ 9e5619a8
......@@ -35,6 +35,7 @@ ProcessInternalsUI::ProcessInternalsUI(WebUI* web_ui)
WebUIDataSource::Create(kChromeUIProcessInternalsHost);
source->AddResourcePath("process_internals.js", IDR_PROCESS_INTERNALS_JS);
source->AddResourcePath("process_internals.css", IDR_PROCESS_INTERNALS_CSS);
source->AddResourcePath("process_internals.mojom.js",
IDR_PROCESS_INTERNALS_MOJO_JS);
source->SetDefaultResource(IDR_PROCESS_INTERNALS_HTML);
......
content/browser/resources/process/process_internals.css 0 → 100644
View file @ 9e5619a8
/* Copyright 2018 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. */
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
color: rgb(48, 57, 66);
display: flex;
flex-direction: column;
font-size: 13px;
height: 100%;
margin: 0;
overflow: auto;
}
#container {
display: flex;
height: 100%
}
#navigation {
flex-shrink: 0;
padding-top: 20px;
width: 200px;
}
#content {
flex-grow: 1;
}
#caption {
color: rgb(92, 97, 102);
font-size: 1.5rem;
padding-bottom: 10px;
padding-inline-start: 20px;
}
.tab-header {
-webkit-border-start: 6px solid transparent;
padding-left: 15px;
}
.tab-header.selected {
-webkit-border-start-color: rgb(78, 87, 100);
}
.tab-header > button {
background-color: white;
border: 0;
cursor: pointer;
font: inherit;
line-height: 17px;
margin: 6px 0;
padding: 0 2px;
}
.tab-header:not(.selected) > button {
color: #999;
}
#content > div {
min-width: 32em;
padding: 0 20px 65px 0;
}
#content > div:not(.selected) {
display: none;
}
.content-header {
background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
border-bottom: 1px solid #eee;
font-size: 150%;
padding: 20px 0 10px 0;
z-index: 1;
}
content/browser/resources/process/process_internals.html
View file @ 9e5619a8
......@@ -6,11 +6,33 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="process_internals.css">
<script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="process_internals.mojom.js"></script>
<script src='process_internals.js'></script>
<title>Process Model Internals</title>
</head>
<div id="site-isolation-mode">Site Isolation mode: <span id='isolation-mode'>unknown</span></div>
<div id="isolated-origins-container">Number of isolated origins: <span id='isolated-origins'></span></div>
<body>
<div id="container">
<div id="navigation">
<div id="caption">Process Internals</div>
</div>
<div id="content">
<div id="general">
<div class="content-header">General info</div>
<div id="general-info">
<div id="site-isolation-mode">Site Isolation mode: <span id='isolation-mode'>unknown</span></div>
<div id="isolated-origins-container">Number of isolated origins: <span id='isolated-origins'></span></div>
</div>
</div>
<div id="web-contents">
<div class="content-header">WebContents</div>
<div id="wc-list" class="list pages"></div>
</div>
</div>
</div>
</body>
</html>
content/browser/resources/process/process_internals.js
View file @ 9e5619a8
......@@ -2,16 +2,61 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
console.log('process internals initializing');
(function() {
'use strict';
/**
* Reference to the backend.
* Reference to the backend providing all the data.
* @type {mojom.ProcessInternalsHandlerPtr}
*/
var uiHandler = null;
let uiHandler = null;
/**
* @param {string} id Tab id.
* @return {boolean} True if successful.
*/
function selectTab(id) {
const tabContents = document.querySelectorAll('#content > div');
const tabHeaders = $('navigation').querySelectorAll('.tab-header');
let found = false;
for (let i = 0; i < tabContents.length; i++) {
const tabContent = tabContents[i];
const tabHeader = tabHeaders[i];
const isTargetTab = tabContent.id == id;
found = found || isTargetTab;
tabContent.classList.toggle('selected', isTargetTab);
tabHeader.classList.toggle('selected', isTargetTab);
}
if (!found)
return false;
window.location.hash = id;
return true;
}
function onHashChange() {
let hash = window.location.hash.slice(1).toLowerCase();
if (!selectTab(hash))
selectTab('general');
}
function setupTabs() {
const tabContents = document.querySelectorAll('#content > div');
for (let i = 0; i < tabContents.length; i++) {
const tabContent = tabContents[i];
const tabName = tabContent.querySelector('.content-header').textContent;
let tabHeader = document.createElement('div');
tabHeader.className = 'tab-header';
let button = document.createElement('button');
button.textContent = tabName;
tabHeader.appendChild(button);
tabHeader.addEventListener('click', selectTab.bind(null, tabContent.id));
$('navigation').appendChild(tabHeader);
}
onHashChange();
}
document.addEventListener('DOMContentLoaded', function() {
// Setup Mojo interface to the backend.
......@@ -27,6 +72,9 @@ document.addEventListener('DOMContentLoaded', function() {
uiHandler.getIsolatedOriginsSize().then((response) => {
document.getElementById('isolated-origins').innerText = response.size;
});
// Setup the UI
setupTabs();
});
})();
content/content_resources.grd
View file @ 9e5619a8
......@@ -38,6 +38,7 @@
<include name="IDR_NETWORK_ERROR_LISTING_CSS" file="browser/resources/net/network_errors_listing.css" flattenhtml="true" type="BINDATA" />
<include name="IDR_PROCESS_INTERNALS_HTML" file="browser/resources/process/process_internals.html" flattenhtml="true" allowexternalscript="true" compress="gzip" type="BINDATA" />
<include name="IDR_PROCESS_INTERNALS_MOJO_JS" file="${root_gen_dir}/content/browser/process_internals/process_internals.mojom.js" use_base_dir="false" type="BINDATA" compress="gzip" />
<include name="IDR_PROCESS_INTERNALS_CSS" file="browser/resources/process/process_internals.css" flattenhtml="true" compress="gzip" type="BINDATA" />
<include name="IDR_PROCESS_INTERNALS_JS" file="browser/resources/process/process_internals.js" flattenhtml="true" compress="gzip" type="BINDATA" />
<include name="IDR_SERVICE_WORKER_INTERNALS_HTML" file="browser/resources/service_worker/serviceworker_internals.html" flattenhtml="true" allowexternalscript="true" compress="gzip" type="BINDATA" />
<include name="IDR_SERVICE_WORKER_INTERNALS_JS" file="browser/resources/service_worker/serviceworker_internals.js" flattenhtml="true" compress="gzip" type="BINDATA" />
......
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