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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/extensions_ui.html

Issue 329018: Further polish to extensions_ui page (Closed)
Patch Set: pre commit Created 11 years, 1 month 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
« no previous file with comments | « chrome/browser/extensions/extensions_ui.cc ('k') | chrome/common/pref_names.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title i18n-content="title"></title> 5 <title i18n-content="title"></title>
6 <style> 6 <style>
7 body { 7 body {
8 font-size: 87%; 8 font-size: 87%;
9 font-family: Helvetica, Arial, sans-serif; 9 font-family: Helvetica, Arial, sans-serif;
10 margin: 0; 10 margin: 0;
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
67 display: -webkit-box; 67 display: -webkit-box;
68 -webkit-box-orient: vertical; 68 -webkit-box-orient: vertical;
69 } 69 }
70 70
71 .wbox { 71 .wbox {
72 display: -webkit-box; 72 display: -webkit-box;
73 -webkit-box-align: stretch; 73 -webkit-box-align: stretch;
74 -webkit-box-flex: 1; 74 -webkit-box-flex: 1;
75 } 75 }
76 76
77 .showInDevMode {
78 overflow: hidden;
79 }
80
81 body.hideDevModeInitial .showInDevMode {
82 height: 0 !important;
83 opacity: 0;
84 }
85
86 body.hideDevMode .showInDevMode {
87 height: 0 !important;
88 opacity: 0;
89 -webkit-transition: all .5s ease-out;
90 }
91
92 body.showDevMode .showInDevMode {
93 opacity: 1;
94 -webkit-transition: all .5s ease-in;
95 }
96
77 .wbox-dev-tools { 97 .wbox-dev-tools {
78 display: none;
79 -webkit-box-align: stretch; 98 -webkit-box-align: stretch;
80 -webkit-box-flex: 1; 99 -webkit-box-flex: 1;
81 } 100 }
82 101
83 .developer-tools-image { 102 .developer-tools-image {
84 margin-top: 2px; 103 margin-top: 2px;
85 } 104 }
86 105
87 .developer-tools-link { 106 .developer-tools-link {
88 font-size: 100%; 107 font-size: 100%;
(...skipping 15 matching lines...) Expand all
104 border-bottom: 1px solid #edeff5; 123 border-bottom: 1px solid #edeff5;
105 margin-bottom: 9px; 124 margin-bottom: 9px;
106 padding-bottom: 10px; 125 padding-bottom: 10px;
107 } 126 }
108 127
109 .extension-name { 128 .extension-name {
110 font-weight: bold; 129 font-weight: bold;
111 } 130 }
112 131
113 .extension-description { 132 .extension-description {
114 color: gray;
115 margin-top: 0.4em; 133 margin-top: 0.4em;
116 } 134 }
117 135
118 .extension-details { 136 .extension-details {
119 color: gray;
120 margin-top: 0.5em; 137 margin-top: 0.5em;
121 display: none;
122 } 138 }
123 139
124 .extension-actions { 140 .extension-actions {
125 float: right; 141 float: right;
126 } 142 }
127 143
128 .extension-views { 144 .extension-views {
129 margin: 0 0 0; 145 margin: 0 0 0;
130 margin-left: 2ex; 146 margin-left: 2ex;
131 padding: 0; 147 padding: 0;
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
217 margin-top: 20px; 233 margin-top: 20px;
218 } 234 }
219 235
220 </style> 236 </style>
221 <script> 237 <script>
222 /** 238 /**
223 * This variable structure is here to document the structure that the template 239 * This variable structure is here to document the structure that the template
224 * expects to correctly populate the page. 240 * expects to correctly populate the page.
225 */ 241 */
226 var extensionDataFormat = { 242 var extensionDataFormat = {
243 "developerMode": false,
227 "extensions": [ 244 "extensions": [
228 { 245 {
229 "id": "0000000000000000000000000000000000000000", 246 "id": "0000000000000000000000000000000000000000",
230 "name": "Google Chrome", 247 "name": "Google Chrome",
231 "description": "Extension long format description", 248 "description": "Extension long format description",
232 "version": "1.0.231", 249 "version": "1.0.231",
233 "enabled": "true", 250 "enabled": "true",
234 "options_url": "options.html", 251 "options_url": "options.html",
235 "icon": "relative-path-to-icon.png", 252 "icon": "relative-path-to-icon.png",
236 "content_scripts": [ 253 "content_scripts": [
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
290 ] 307 ]
291 } 308 }
292 ] 309 ]
293 }; 310 };
294 311
295 // Keeps track of whether the developer tools subsection has been made visible 312 // Keeps track of whether the developer tools subsection has been made visible
296 // (expanded) or not. 313 // (expanded) or not.
297 var devToolsExpanded = false; 314 var devToolsExpanded = false;
298 315
299 /** 316 /**
317 * Toggles the devToolsExpanded, and notifies the c++ dom_ui to toggle the
318 * extensions.ui.developer_mode which saved in the preferences.
319 */
320 function toggleDevToolsExpanded() {
321 devToolsExpanded = !devToolsExpanded;
322 chrome.send('toggleDeveloperMode', []);
323 }
324
325 /**
300 * Takes the |extensionsData| input argument which represents data about the 326 * Takes the |extensionsData| input argument which represents data about the
301 * currently installed/running extensions and populates the html jstemplate with 327 * currently installed/running extensions and populates the html jstemplate with
302 * that data. It expects an object structure like the above. 328 * that data. It expects an object structure like the above.
303 * @param {Object} extensionsData Detailed info about installed extensions 329 * @param {Object} extensionsData Detailed info about installed extensions
304 */ 330 */
305 function showExtensionsData(extensionsData) { 331 function showExtensionsData(extensionsData) {
306 // Sort by extension name (case-insensitive) 332 // Sort by extension name (case-insensitive)
307 extensionsData.extensions.sort(function(a, b) { 333 extensionsData.extensions.sort(function(a, b) {
308 a = a.name.toLowerCase(); 334 a = a.name.toLowerCase();
309 b = b.name.toLowerCase(); 335 b = b.name.toLowerCase();
(...skipping 14 matching lines...) Expand all
324 function requestExtensionsData() { 350 function requestExtensionsData() {
325 chrome.send("requestExtensionsData", []); 351 chrome.send("requestExtensionsData", []);
326 } 352 }
327 353
328 // Used for observing function of the backend datasource for this page by 354 // Used for observing function of the backend datasource for this page by
329 // tests. 355 // tests.
330 window.domui_responded_ = false; 356 window.domui_responded_ = false;
331 357
332 function returnExtensionsData(extensionsData) { 358 function returnExtensionsData(extensionsData) {
333 window.domui_responded_ = true; 359 window.domui_responded_ = true;
360
361 devToolsExpanded = extensionsData.developerMode;
362
334 showExtensionsData(extensionsData); 363 showExtensionsData(extensionsData);
335 364
336 // We are currently hiding the body because the first call to jstProcess() to 365 // We are currently hiding the body because the first call to jstProcess() to
337 // insert localized strings happens prior to this call which runs during the 366 // insert localized strings happens prior to this call which runs during the
338 // body.onload event, causes a flickering. 367 // body.onload event, causes a flickering.
339 document.getElementById('body-container').style.display = "inline"; 368 document.getElementById('body-container').style.display = "inline";
369
370 // Explicitly set the height for each element that wants to be "slid" in and
371 // out when the devToolsExpanded is toggled.
372 var slidables = document.getElementsByClassName('showInDevMode');
373 for (var i = 0; i < slidables.length; i++) {
374 slidables[i].style.height = slidables[i].offsetHeight + "px";
375 }
376
377 // If not in developer mode, hide the developer mode elements without the
378 // slide/fade transition.
379 if (!devToolsExpanded) {
380 document.getElementsByTagName('body')[0].className = "hideDevModeInitial";
381 } else {
382 document.getElementById('collapse').style.display = "inline";
383 document.getElementById('expand').style.display = "none";
384 }
340 } 385 }
341 386
342 /** 387 /**
343 * Tell the C++ ExtensionDOMHandler to inspect the page detailed in |viewData|. 388 * Tell the C++ ExtensionDOMHandler to inspect the page detailed in |viewData|.
344 */ 389 */
345 function sendInspectMessage(viewData) { 390 function sendInspectMessage(viewData) {
346 // TODO(aa): This is ghetto, but DOMUIBindings doesn't support sending 391 // TODO(aa): This is ghetto, but DOMUIBindings doesn't support sending
347 // anything other than arrays of strings, and this is all going to get 392 // anything other than arrays of strings, and this is all going to get
348 // replaced with V8 extensions soon anyway. 393 // replaced with V8 extensions soon anyway.
349 chrome.send('inspect', [ 394 chrome.send('inspect', [
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
428 * Hides the pack dialog. 473 * Hides the pack dialog.
429 */ 474 */
430 function hidePackDialog() { 475 function hidePackDialog() {
431 document.getElementById('dialogBackground').style.display="none" 476 document.getElementById('dialogBackground').style.display="none"
432 } 477 }
433 478
434 /* 479 /*
435 * Toggles visibility of the developer tools. 480 * Toggles visibility of the developer tools.
436 */ 481 */
437 function toggleDeveloperTools() { 482 function toggleDeveloperTools() {
438 devToolsExpanded = !devToolsExpanded; 483 toggleDevToolsExpanded();
439 484
440 document.getElementById('collapse').style.display = 485 document.getElementById('collapse').style.display =
441 devToolsExpanded ? "inline" : "none"; 486 devToolsExpanded ? "inline" : "none";
442 document.getElementById('expand').style.display = 487 document.getElementById('expand').style.display =
443 devToolsExpanded ? "none" : "inline"; 488 devToolsExpanded ? "none" : "inline";
444 document.getElementById('developer_tools').style.display =
445 devToolsExpanded ? "-webkit-box" : "none";
446 489
447 // Show/hide extra details for the extension. 490 document.getElementsByTagName('body')[0].className =
448 var details = document.getElementsByClassName('extension-details'); 491 devToolsExpanded ? "showDevMode" : "hideDevMode";
449 for (var i = 0; i < details.length; ++i)
450 details[i].style.display = devToolsExpanded ? "block" : "none";
451 } 492 }
452 493
453 /** 494 /**
454 * Pop up a select dialog to capture the extension path. 495 * Pop up a select dialog to capture the extension path.
455 */ 496 */
456 function selectExtensionPath() { 497 function selectExtensionPath() {
457 showFileDialog('folder', 'packRoot', function(filePath) { 498 showFileDialog('folder', 'packRoot', function(filePath) {
458 document.getElementById('extensionPathText').value = filePath; 499 document.getElementById('extensionPathText').value = filePath;
459 }); 500 });
460 } 501 }
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after
527 </div> 568 </div>
528 </div> 569 </div>
529 570
530 <div id="body-container" style="display:none;"> 571 <div id="body-container" style="display:none;">
531 572
532 <div id="header"><h1>Installed Extensions</h1></div> 573 <div id="header"><h1>Installed Extensions</h1></div>
533 574
534 <div id="extensionTemplate"> 575 <div id="extensionTemplate">
535 576
536 <div id="container" class="vbox-container"> 577 <div id="container" class="vbox-container">
537 <div id="top" class="wbox"> 578 <div id="top" class="wbox" style="padding-right: 10px">
538 579
539 <div class="section-header"> 580 <div class="section-header">
540 <table cellpadding="0" cellspacing="0" width="100%"> 581 <table cellpadding="0" cellspacing="0" width="100%">
541 <tr valign="center"> 582 <tr valign="center">
542 <td> 583 <td>
543 <span class="section-header-title">Installed Extensions 584 <span class="section-header-title">Installed Extensions
544 <span jsdisplay="extensions.length > 0">(<span 585 <span jsdisplay="extensions.length > 0">(<span
545 jscontent="extensions.length"></span>)</span> 586 jscontent="extensions.length"></span>)</span>
546 </span> 587 </span>
547 </td> 588 </td>
548 <td width="14" padding=""> 589 <td width="14" padding="">
549 <img id="collapse" class="developer-tools-image" 590 <img id="collapse" class="developer-tools-image"
550 style="display:none" onclick="toggleDeveloperTools();" 591 style="display:none" onclick="toggleDeveloperTools();"
551 src="minus.png" /> 592 src="minus.png" />
552 <img id="expand" class="developer-tools-image" 593 <img id="expand" class="developer-tools-image"
553 onclick="toggleDeveloperTools();" src="plus.png" /> 594 onclick="toggleDeveloperTools();" src="plus.png" />
554 </td> 595 </td>
555 <td width="50" align="right"> 596 <td width="50" align="right">
556 <div class="developer-tools-link"> 597 <div class="developer-tools-link">
557 <a onclick="toggleDeveloperTools();">Developer tools</a> 598 <a onclick="toggleDeveloperTools();">Developer tools</a>
558 </div> 599 </div>
559 </td> 600 </td>
560 </tr> 601 </tr>
561 </table> 602 </table>
562 </div> 603 </div>
563 604
564 </div> 605 </div>
565 <div id="developer_tools" class="wbox-dev-tools"> 606 <div id="developer_tools" class="wbox-dev-tools showInDevMode">
566 <div class="developer-tools"> 607 <div class="developer-tools">
567 Developer Tools: 608 Developer Tools:
568 <button onclick="loadExtension()">Load unpacked Extension...</button> 609 <button onclick="loadExtension()">Load unpacked Extension...</button>
569 <button onclick="showPackDialog()">Pack Extension...</button> 610 <button onclick="showPackDialog()">Pack Extension...</button>
570 <button onclick="autoUpdate()">Update Extensions now</button> 611 <button onclick="autoUpdate()">Update Extensions now</button>
571 </div> 612 </div>
572 </div> 613 </div>
573 </div> 614 </div>
574 615
575 <div class="content"> 616 <div class="content">
(...skipping 17 matching lines...) Expand all
593 </td> 634 </td>
594 <td valign="top"> 635 <td valign="top">
595 <div> 636 <div>
596 <span class="extension-name" 637 <span class="extension-name"
597 jscontent="name">Extension Name</span> 638 jscontent="name">Extension Name</span>
598 <span>Version <span jscontent="version">x.x.x.x</span></span> 639 <span>Version <span jscontent="version">x.x.x.x</span></span>
599 <span jsdisplay="!enabled">(Disabled)</span> 640 <span jsdisplay="!enabled">(Disabled)</span>
600 </div> 641 </div>
601 642
602 <div class="extension-description" jscontent="description"></div> 643 <div class="extension-description" jscontent="description"></div>
603 <div class="extension-details">ID: <span jscontent="id" ></span> 644 <div class="showInDevMode">
604 </div> 645 <div class="extension-details">ID: <span jscontent="id"></span>
605 <div class="extension-details"> 646 </div>
606 <span jsdisplay="views.length > 0"> 647 <div class="extension-details">
607 Inspect active views: 648 <span jsdisplay="views.length > 0">
608 </span> 649 Inspect active views:
609 <ul class="extension-views"> 650 </span>
610 <li jsselect="views"> 651 <ul class="extension-views">
611 <a jsvalues=".extensionView:$this" href="#" 652 <li jsselect="views">
612 onclick="sendInspectMessage(this.extensionView); return false;" 653 <a jsvalues=".extensionView:$this" href="#"
613 ><span jscontent="path"></span></a> 654 onclick="sendInspectMessage(this.extensionView); return f alse;">
614 </ul> 655 <span jscontent="path"></span>
656 </a>
657 </li>
658 </ul>
659 </div>
615 </div> 660 </div>
616 </td> 661 </td>
617 <td width="300"> 662 <td width="300">
618 <div align="right"> 663 <div align="right">
619 <span class="extension-actions"> 664 <span class="extension-actions">
620 <a 665 <a
621 jsvalues=".extensionId:id" 666 jsvalues=".extensionId:id"
622 jsdisplay="enabled" 667 jsdisplay="enabled"
623 onclick="handleEnableExtension(this, false)" 668 onclick="handleEnableExtension(this, false)"
624 href="javascript:void();" 669 href="javascript:void();"
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
658 </td> 703 </td>
659 </tr> 704 </tr>
660 </table> 705 </table>
661 </div> 706 </div>
662 </div> 707 </div>
663 </div> 708 </div>
664 </div> 709 </div>
665 </div> 710 </div>
666 </body> 711 </body>
667 </html> 712 </html>
OLDNEW
« no previous file with comments | « chrome/browser/extensions/extensions_ui.cc ('k') | chrome/common/pref_names.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698