Initial commit of scratch work for home page of perfview

2026-08-09 12:09:44 +00:00 · 2016-06-06 08:49:57 -07:00
parent baa05b217e
commit bdaa7eec84
2 changed files with 181 additions and 0 deletions
@@ -0,0 +1,70 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="home.css">
+  </head>
+
+  <body>
+
+    <div class="nav">
+      <ul class="navItems" id="dropdownNav">
+        <li><a href="#">File</a></li>
+        <li><a href="#">Collect</a></li>
+        <li><a href="#">Memory</a></li>
+        <li><a href="#">Help</a></li>
+      </ul>
+
+      <ul class="navItems" id="helpfulLinks">
+        <li><a href="#">Main View Help</a></li>
+        <li><a href="#">Tutorial</a></li>
+        <li><a href="#">Troubleshooting</a></li>
+        <li><a href="#">FAQ</a></li>
+      </ul>
+    </div>
+
+    <div class="wrapper">
+      <div class="tree">
+        Tree Container
+      </div>
+
+      <div class="main">
+        <p>Welcome to PerfView!
+  PerfView is an application designed to simplify the collection and analysis of performance data.
+  Pressing the F1 key will give you help for current view. Any blue hyperlinks in the UI also take you to help. For an overview of PerfView see the User's Guide . If you wish to ask a question that the documentation did not answer or if you have feedback or a bug report, see the feedback instructions in the documentation.
+  If you are new to PerfView , we strongly recommend reading the tutorial or watch the tutorial videos . It should only take 10-20 minutes to walk through. Also recommend is reading what perfView can do for you .
+  Optimizing Time, or Unmanaged Memory: Collecting ETW Profile Data
+  PerfView can collect a time based ETW trace for investigating CPU and Server Response Time, as well as Wall Clock / Blocked Time , Unmanaged memory or Managed memory . For these cases PerfView has two ways of collecting ETW trace data :
+  •	Run a command and collect data while the command is running. Collect->Run (Alt-R)
+  •	Collect data machine wide by starting and stopping collection manually. Collect->Collect (Alt-C)
+  Optimizing Managed Memory: Collecting .NET Runtime Heap Data
+  PerfView can also collect data about the GC heap of a .NET Runtime process. See GC Heap Quick Start for more details.
+  •	Take a heap snapshot of an existing process Memory->Take Heap Snapshot (Alt-S)
+  To Take a heap snapshot from a Process Dump simply double click on the .DMP file in the file view to the left.
+
+  Viewing Existing Profile Data
+  The result of data collection is data stored in data files of varying extensions. The left pane is a list of file names in the current directory that PerfView knows how to open. Simply double click on the file of interest to view the data. You can change the current directory by either double clicking on a subdirectory or typing the name in the textbox in the upper left.
+  If the file contains more than one view of the data then double clicking on the object populates children nodes in the treeview. Double clicking on one of the children will open the viewer for that view. Right clicking and selecting 'Help on Item' will take you to the help for that particular entry in the viewer. There are two main viewers of profile data:
+  •	A stack viewer which allows aggregation and filtering of events with associated stack traces.
+  •	An event viewer which allows filtering of time based events.
+
+  Diffing Profile Data
+  PerfView has the ability to determine the difference between two traces, which is very useful in doing regression analysis. To use the Diff functionality first view both traces in separate stack view windows and (if necessary) filter out all but the region that represents an equivalent amount of work in each view. Then use the Diff menu on the stack view window of the 'regressed' trace and to select the other window as its baseline. See Diff Help for more.
+      </div>
+    </div>
+
+    </wrapper>
+
+
+      <footer class="footer">
+        <div class="status">
+          <span>Completed: View (Elapsed Time: 0.070 sec)</span>
+        </div>
+
+        <div class="toggle">
+          <span>Ready</span>
+          <a href="#">Log</a>
+          <a href="#">Cancel</a>
+        </div>
+      </footer>
+
+  </body>
+</html>
@@ -0,0 +1,111 @@
+
+
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+
+/*
+Nav Bar Views
+-------------
+*/
+/* Wrapper for Nav Bar Views */
+.nav {
+  margin: 0;
+  display: flex;
+}
+
+/* Wrapper for dropdownNav and helpfulLinks */
+.nav .navItems {
+  margin: 0;
+  list-style: none;
+  margin: 0;
+  background-color: deepskyblue;
+
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.nav #dropdownNav {
+  margin: 0;
+  flex-grow: 1;
+  justify-content: flex-start;
+}
+
+.nav #helpfulLinks {
+  margin: 0;
+  justify-content: flex-end;
+}
+
+.nav #dropdownNav li a, .nav #helpfulLinks li a {
+  text-decoration: none;
+  display: block;
+  padding: .5em;
+  color: white;
+}
+/*------------*/
+
+
+/*
+Tree View and Main View
+-----------------------
+*/
+/* Wrapper for Tree View and Main View */
+.wrapper {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+/* Tree View */
+.wrapper .tree {
+  min-width: 20em;
+  border-right-style: solid;
+  border-right-color: deepskyblue;
+}
+
+/* Main View */
+.wrapper .main {
+  flex-grow: 1;  /* TODO: May not need this since implementing '.wrapper' */
+}
+/*--------------------*/
+
+
+
+/*
+Footer View
+-----------
+*/
+.footer {
+  list-style: none;
+  margin: 0;
+
+  background: deepskyblue;
+
+  display: flex;
+  flex-flow: row;
+
+  height: 2em;
+}
+
+.footer .status {
+  flex-grow: 1;
+}
+
+.footer .toggle {
+  min-width: 17em;
+}
+
+.footer .status span {
+  line-height: 2em;
+  margin-left: .2em;
+}
+
+.footer .toggle span {
+  line-height: 2em;
+}
+/*----------*/