Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(41)

Side by Side Diff: runtime/bin/vmservice/client/lib/src/observatory_elements/nav_bar.html

Issue 185413015: Update the navbar in the observatory (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: new js Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <head>
2 <link rel="import" href="observatory_element.html">
3 </head>
4
5 <polymer-element name="nav-bar" extends="observatory-element">
6 <template>
7 <style>
8 nav ul {
9 display: inline-table;
10 position: relative;
11 list-style: none;
12 padding-left: 0;
13 margin-left: 0;
14 width: 100%;
15 z-index: 10;
16 font: 400 16px 'Montserrat', sans-serif;
17 color: white;
18 background-color: #0489c3;
19 }
20 nav ul:after {
21 content: ""; clear: both; display: block;
22 }
23 </style>
24 <nav>
25 <ul>
26 <content></content>
27 </ul>
28 </nav>
29 </template>
30 </polymer-element>
31
32 <polymer-element name="nav-menu" extends="observatory-element">
33 <template>
34 <style>
35 .menu, .spacer {
36 float: left;
37 }
38 .menu a, .spacer {
39 display: block;
40 padding: 12px 8px;
41 color: White;
42 text-decoration: none;
43 }
44 .menu:hover {
45 background: #455;
46 }
47 .menu ul {
48 display: none;
49 position: absolute;
50 top: 100%;
51 list-style: none;
52 padding: 0;
53 margin-left: 0;
54 width: auto;
55 z-index: 10;
56 font: 400 16px 'Montserrat', sans-serif;
57 color: white;
58 background: #567;
59 }
60 .menu ul:after {
61 content: ""; clear: both; display: block;
62 }
63 .menu:hover > ul {
64 display: block;
65 }
66 </style>
67
68 <li class="menu"><a href="{{ link }}">{{ anchor }}</a>
69 <ul><content></content></ul>
70 </li>
71 <template if="{{ !last }}">
72 <li class="spacer">&gt;</li>
73 </template>
74
75 </template>
76 </polymer-element>
77
78 <polymer-element name="nav-menu-item" extends="observatory-element">
79 <template>
80 <style>
81 li {
82 float: none;
83 border-top: 1px solid #677;
84 border-bottom: 1px solid #556; position: relative;
85 }
86 li:hover {
87 background: #455;
88 }
89 li ul {
90 display: none;
91 position: absolute;
92 top:0;
93 left: 100%;
94 list-style: none;
95 padding: 0;
96 margin-left: 0;
97 width: auto;
98 z-index: 10;
99 font: 400 16px 'Montserrat', sans-serif;
100 color: white;
101 background: #567;
102 }
103 li ul:after {
104 content: ""; clear: both; display: block;
105 }
106 li:hover > ul {
107 display: block;
108 }
109 li a {
110 display: block;
111 padding: 12px 12px;
112 color: white;
113 text-decoration: none;
114 }
115 </style>
116 <li><a href="{{ link }}">{{ anchor }}</a>
117 <ul><content></content></ul>
118 </li>
119 </template>
120 </polymer-element>
121
122 <polymer-element name="nav-refresh" extends="observatory-element">
123 <template>
124 <style>
125 .active {
126 color: #aaa;
127 }
128 .idle {
129 color: #000;
130 }
131 li {
132 float: right;
133 margin: 0;
134 }
135 li button {
136 margin: 3px;
137 padding: 8px;
138 }
139 </style>
140 <li>
141 <template if="{{ active }}">
142 <button class="active" on-click="{{ buttonClick }}">Refresh</button>
143 </template>
144 <template if="{{ !active }}">
145 <button class="idle" on-click="{{ buttonClick }}">Refresh</button>
146 </template>
147 </li>
148 </template>
149 </polymer-element>
150
151 <polymer-element name="top-nav-menu">
152 <template>
153 <nav-menu link="#" anchor="Observatory" last="{{ last }}">
154 <content></content>
155 </nav-menu>
156 </template>
157 </polymer-element>
158
159 <polymer-element name="isolate-nav-menu" extends="observatory-element">
160 <template>
161 <nav-menu link="#" anchor="{{ isolate.name }}" last="{{ last }}">
162 <nav-menu-item link="{{ app.locationManager.currentIsolateRelativeLink('st acktrace') }}"
163 anchor="stack trace"></nav-menu-item>
164 <nav-menu-item link="{{ app.locationManager.currentIsolateRelativeLink('pr ofile') }}"
165 anchor="cpu profile"></nav-menu-item>
166 <nav-menu-item link="{{ app.locationManager.currentIsolateRelativeLink('al locationprofile') }}"
167 anchor="heap profile"></nav-menu-item>
168 <nav-menu-item link="{{ app.locationManager.currentIsolateRelativeLink('de bug/breakpoints') }}"
169 anchor="breakpoints"></nav-menu-item>
170 <content></content>
171 </nav-menu>
172 </template>
173 </polymer-element>
174
175 <polymer-element name="library-nav-menu" extends="observatory-element">
176 <template>
177 <nav-menu link="{{ app.locationManager.currentIsolateRelativeLink(library['i d']) }}"
178 anchor="{{ library['name'] }}" last="{{ last }}">
179 <content></content>
180 </nav-menu>
181 </template>
182 </polymer-element>
183
184 <polymer-element name="class-nav-menu" extends="observatory-element">
185 <template>
186 <nav-menu link="{{ app.locationManager.currentIsolateRelativeLink(cls['id']) }}"
187 anchor="{{ cls['user_name'] }}" last="{{ last }}">
188 <content></content>
189 </nav-menu>
190 </template>
191 </polymer-element>
192
193 <script type="application/dart" src="nav_bar.dart"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698