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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 365008: Grouping the extensions and calling out the disabled ones more prominently (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' 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 | Annotate | Revision Log
« no previous file with comments | « chrome/browser/extensions/extensions_ui.cc ('k') | chrome/browser/resources/gray.png » ('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: 10px; 10 margin: 10px;
(...skipping 24 matching lines...) Expand all
35 35
36 h1 { 36 h1 {
37 font-size: 150%; 37 font-size: 150%;
38 font-weight: bold; 38 font-weight: bold;
39 padding: 0; 39 padding: 0;
40 margin: 0; 40 margin: 0;
41 } 41 }
42 42
43 div.content { 43 div.content {
44 font-size: 84%; 44 font-size: 84%;
45 margin-top: 10px; 45 margin-top: 5px;
46 } 46 }
47 47
48 .section-header { 48 .section-header {
49 background: #ebeff9; 49 background: #ebeff9;
50 border-top: 1px solid #b5c7de; 50 border-top: 1px solid #b5c7de;
51 font-size: 95%; 51 font-size: 95%;
52 padding-bottom: 2px; 52 padding-bottom: 2px;
53 padding-left: 5px; 53 padding-left: 5px;
54 padding-top: 3px; 54 padding-top: 3px;
55 width: 100%; 55 width: 100%;
(...skipping 27 matching lines...) Expand all
83 height: 0 !important; 83 height: 0 !important;
84 opacity: 0; 84 opacity: 0;
85 -webkit-transition: all .1s ease-out; 85 -webkit-transition: all .1s ease-out;
86 } 86 }
87 87
88 body.showDevMode .showInDevMode { 88 body.showDevMode .showInDevMode {
89 opacity: 1; 89 opacity: 1;
90 -webkit-transition: all .1s ease-in; 90 -webkit-transition: all .1s ease-in;
91 } 91 }
92 92
93 .wbox-dev-tools { 93 .wbox-dev-mode {
94 -webkit-box-align: stretch; 94 -webkit-box-align: stretch;
95 -webkit-box-flex: 1; 95 -webkit-box-flex: 1;
96 } 96 }
97 97
98 .developer-tools-image { 98 .developer-mode-image {
99 margin-top: 2px; 99 margin-top: 2px;
100 } 100 }
101 101
102 .developer-tools-link { 102 .developer-mode-link {
103 font-size: 100%; 103 font-size: 100%;
104 margin-right: 3px; 104 margin-right: 3px;
105 white-space: nowrap; 105 white-space: nowrap;
106 } 106 }
107 107
108 .developer-tools { 108 .developer-mode {
109 background: #f4f6fc; 109 background: #f4f6fc;
110 border-bottom: 1px solid #edeff5; 110 border-bottom: 1px solid #edeff5;
111 font-size: 85%; 111 font-size: 85%;
112 padding-bottom: 0.8em; 112 padding-bottom: 0.8em;
113 padding-left: 10px; 113 padding-left: 10px;
114 padding-top: 0.8em; 114 padding-top: 0.8em;
115 width: 100%; 115 width: 100%;
116 } 116 }
117 117
118 .extension_enabled_false td {
119 background: url('gray.png') 0px 0px;
120 color: #a0a0a0;
121 padding-bottom: 4px;
122 padding-top: 5px;
123 }
124
125 .extension_enabled_true td {
126 padding-bottom: 4px;
127 padding-top: 5px;
128 }
129
118 .extension { 130 .extension {
119 border-bottom: 1px solid #edeff5; 131 border-bottom: 1px solid #cdcdcd;
120 margin-bottom: 9px;
121 padding-bottom: 10px;
122 } 132 }
123 133
124 .extension-name { 134 .extension-name {
125 font-weight: bold; 135 font-weight: bold;
126 } 136 }
127 137
128 .extension-description { 138 .extension-description {
129 margin-top: 0.4em; 139 margin-top: 0.4em;
130 } 140 }
131 141
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after
237 */ 247 */
238 var extensionDataFormat = { 248 var extensionDataFormat = {
239 "developerMode": false, 249 "developerMode": false,
240 "extensions": [ 250 "extensions": [
241 { 251 {
242 "id": "0000000000000000000000000000000000000000", 252 "id": "0000000000000000000000000000000000000000",
243 "name": "Google Chrome", 253 "name": "Google Chrome",
244 "description": "Extension long format description", 254 "description": "Extension long format description",
245 "version": "1.0.231", 255 "version": "1.0.231",
246 "enabled": "true", 256 "enabled": "true",
257 "order": 1,
247 "options_url": "options.html", 258 "options_url": "options.html",
248 "icon": "relative-path-to-icon.png", 259 "icon": "relative-path-to-icon.png",
249 "content_scripts": [ 260 "content_scripts": [
250 { 261 {
251 "js": ["script1_file1.js", "script1_file2.js"], 262 "js": ["script1_file1.js", "script1_file2.js"],
252 "css": ["script1_file1.css", "script1_file2.css"], 263 "css": ["script1_file1.css", "script1_file2.css"],
253 "matches": ["http://*/*", "http://other.com/*"] 264 "matches": ["http://*/*", "http://other.com/*"]
254 }, 265 },
255 { 266 {
256 "js": ["script2_file1.js", "script2_file2.js"], 267 "js": ["script2_file1.js", "script2_file2.js"],
(...skipping 17 matching lines...) Expand all
274 "renderProcessId": 1 285 "renderProcessId": 1
275 } 286 }
276 ] 287 ]
277 }, 288 },
278 { 289 {
279 "id": "0000000000000000000000000000000000000001", 290 "id": "0000000000000000000000000000000000000001",
280 "name": "RSS Subscriber", 291 "name": "RSS Subscriber",
281 "description": "Extension long format description", 292 "description": "Extension long format description",
282 "version": "1.0.231", 293 "version": "1.0.231",
283 "enabled": "true", 294 "enabled": "true",
295 "order": 2,
284 "icon": "", 296 "icon": "",
285 "content_scripts": [ 297 "content_scripts": [
286 { 298 {
287 "js": ["script1_file1.js", "script1_file2.js"], 299 "js": ["script1_file1.js", "script1_file2.js"],
288 "css": ["script1_file1.css", "script1_file2.css"], 300 "css": ["script1_file1.css", "script1_file2.css"],
289 "matches": ["http://*/*", "http://other.com/*"] 301 "matches": ["http://*/*", "http://other.com/*"]
290 }, 302 },
291 { 303 {
292 "js": ["script2_file1.js", "script2_file2.js"], 304 "js": ["script2_file1.js", "script2_file2.js"],
293 "css": ["script2_file1.css", "script2_file2.css"], 305 "css": ["script2_file1.css", "script2_file2.css"],
294 "matches": ["http://*/*", "http://other.com/*"] 306 "matches": ["http://*/*", "http://other.com/*"]
295 } 307 }
296 ], 308 ],
297 "views": [ 309 "views": [
298 { 310 {
299 "path": "foo/bar/toolstrip.html", 311 "path": "foo/bar/toolstrip.html",
300 "renderViewId": 3, 312 "renderViewId": 3,
301 "renderProcessId": 1 313 "renderProcessId": 1
302 } 314 }
303 ] 315 ]
304 } 316 }
305 ] 317 ]
306 }; 318 };
307 319
308 // Keeps track of whether the developer tools subsection has been made visible 320 // Keeps track of whether the developer mode subsection has been made visible
309 // (expanded) or not. 321 // (expanded) or not.
310 var devToolsExpanded = false; 322 var devModeExpanded = false;
311 323
312 /** 324 /**
313 * Toggles the devToolsExpanded, and notifies the c++ dom_ui to toggle the 325 * Toggles the devModeExpanded, and notifies the c++ dom_ui to toggle the
314 * extensions.ui.developer_mode which saved in the preferences. 326 * extensions.ui.developer_mode which saved in the preferences.
315 */ 327 */
316 function toggleDevToolsExpanded() { 328 function toggleDevModeExpanded() {
317 devToolsExpanded = !devToolsExpanded; 329 devModeExpanded = !devModeExpanded;
318 chrome.send('toggleDeveloperMode', []); 330 chrome.send('toggleDeveloperMode', []);
319 } 331 }
320 332
321 /** 333 /**
322 * Takes the |extensionsData| input argument which represents data about the 334 * Takes the |extensionsData| input argument which represents data about the
323 * currently installed/running extensions and populates the html jstemplate with 335 * currently installed/running extensions and populates the html jstemplate with
324 * that data. It expects an object structure like the above. 336 * that data. It expects an object structure like the above.
325 * @param {Object} extensionsData Detailed info about installed extensions 337 * @param {Object} extensionsData Detailed info about installed extensions
326 */ 338 */
327 function showExtensionsData(extensionsData) { 339 function showExtensionsData(extensionsData) {
328 // Sort by extension name (case-insensitive) 340 // Sort by order specified in the data or (if equal) then sort by
341 // extension name (case-insensitive).
329 extensionsData.extensions.sort(function(a, b) { 342 extensionsData.extensions.sort(function(a, b) {
330 a = a.name.toLowerCase(); 343 if (a.order == b.order) {
331 b = b.name.toLowerCase(); 344 a = a.name.toLowerCase();
332 return a < b ? -1 : (a > b ? 1 : 0); 345 b = b.name.toLowerCase();
346 return a < b ? -1 : (a > b ? 1 : 0);
347 } else {
348 return a.order < b.order ? -1 : 1;
349 }
333 }); 350 });
334 351
335 // This is the javascript code that processes the template: 352 // This is the javascript code that processes the template:
336 var input = new JsEvalContext(extensionsData); 353 var input = new JsEvalContext(extensionsData);
337 var output = document.getElementById('extensionTemplate'); 354 var output = document.getElementById('extensionTemplate');
338 jstProcess(input, output); 355 jstProcess(input, output);
339 } 356 }
340 357
341 /* 358 /*
342 * Asks the C++ ExtensionDOMHandler to get details about the installed 359 * Asks the C++ ExtensionDOMHandler to get details about the installed
343 * extensions and return detailed data about the configuration. The 360 * extensions and return detailed data about the configuration. The
344 * ExtensionDOMHandler should reply to returnExtensionsData() (below). 361 * ExtensionDOMHandler should reply to returnExtensionsData() (below).
345 */ 362 */
346 function requestExtensionsData() { 363 function requestExtensionsData() {
347 chrome.send("requestExtensionsData", []); 364 chrome.send("requestExtensionsData", []);
348 } 365 }
349 366
350 // Used for observing function of the backend datasource for this page by 367 // Used for observing function of the backend datasource for this page by
351 // tests. 368 // tests.
352 window.domui_responded_ = false; 369 window.domui_responded_ = false;
353 370
354 function returnExtensionsData(extensionsData) { 371 function returnExtensionsData(extensionsData) {
355 window.domui_responded_ = true; 372 window.domui_responded_ = true;
356 373
357 devToolsExpanded = extensionsData.developerMode; 374 devModeExpanded = extensionsData.developerMode;
358 375
359 showExtensionsData(extensionsData); 376 showExtensionsData(extensionsData);
360 377
361 // We are currently hiding the body because the first call to jstProcess() to 378 // We are currently hiding the body because the first call to jstProcess() to
362 // insert localized strings happens prior to this call which runs during the 379 // insert localized strings happens prior to this call which runs during the
363 // body.onload event, causes a flickering. 380 // body.onload event, causes a flickering.
364 document.getElementById('body-container').style.display = "inline"; 381 document.getElementById('body-container').style.display = "inline";
365 382
366 // Explicitly set the height for each element that wants to be "slid" in and 383 // Explicitly set the height for each element that wants to be "slid" in and
367 // out when the devToolsExpanded is toggled. 384 // out when the devModeExpanded is toggled.
368 var slidables = document.getElementsByClassName('showInDevMode'); 385 var slidables = document.getElementsByClassName('showInDevMode');
369 for (var i = 0; i < slidables.length; i++) { 386 for (var i = 0; i < slidables.length; i++)
370 slidables[i].style.height = slidables[i].offsetHeight + "px"; 387 slidables[i].style.height = slidables[i].offsetHeight + "px";
371 }
372 388
373 // If not in developer mode, hide the developer mode elements without the 389 // If not in developer mode, hide the developer mode elements without the
374 // slide/fade transition. 390 // slide/fade transition.
375 if (!devToolsExpanded) { 391 if (!devModeExpanded) {
376 document.getElementsByTagName('body')[0].className = "hideDevModeInitial"; 392 document.getElementsByTagName('body')[0].className = "hideDevModeInitial";
377 } else { 393 } else {
378 document.getElementById('collapse').style.display = "inline"; 394 document.getElementById('collapse').style.display = "inline";
379 document.getElementById('expand').style.display = "none"; 395 document.getElementById('expand').style.display = "none";
380 } 396 }
381 } 397 }
382 398
383 /** 399 /**
384 * Tell the C++ ExtensionDOMHandler to inspect the page detailed in |viewData|. 400 * Tell the C++ ExtensionDOMHandler to inspect the page detailed in |viewData|.
385 */ 401 */
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after
466 } 482 }
467 483
468 /** 484 /**
469 * Hides the pack dialog. 485 * Hides the pack dialog.
470 */ 486 */
471 function hidePackDialog() { 487 function hidePackDialog() {
472 document.getElementById('dialogBackground').style.display="none" 488 document.getElementById('dialogBackground').style.display="none"
473 } 489 }
474 490
475 /* 491 /*
476 * Toggles visibility of the developer tools. 492 * Toggles visibility of the developer mode.
477 */ 493 */
478 function toggleDeveloperTools() { 494 function toggleDeveloperMode() {
479 toggleDevToolsExpanded(); 495 toggleDevModeExpanded();
480 496
481 document.getElementById('collapse').style.display = 497 document.getElementById('collapse').style.display =
482 devToolsExpanded ? "inline" : "none"; 498 devModeExpanded ? "inline" : "none";
483 document.getElementById('expand').style.display = 499 document.getElementById('expand').style.display =
484 devToolsExpanded ? "none" : "inline"; 500 devModeExpanded ? "none" : "inline";
485 501
486 document.getElementsByTagName('body')[0].className = 502 document.getElementsByTagName('body')[0].className =
487 devToolsExpanded ? "showDevMode" : "hideDevMode"; 503 devModeExpanded ? "showDevMode" : "hideDevMode";
488 } 504 }
489 505
490 /** 506 /**
491 * Pop up a select dialog to capture the extension path. 507 * Pop up a select dialog to capture the extension path.
492 */ 508 */
493 function selectExtensionPath() { 509 function selectExtensionPath() {
494 showFileDialog('folder', 'packRoot', function(filePath) { 510 showFileDialog('folder', 'packRoot', function(filePath) {
495 document.getElementById('extensionPathText').value = filePath; 511 document.getElementById('extensionPathText').value = filePath;
496 }); 512 });
497 } 513 }
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
579 <table cellpadding="0" cellspacing="0" width="100%"> 595 <table cellpadding="0" cellspacing="0" width="100%">
580 <tr valign="center"> 596 <tr valign="center">
581 <td> 597 <td>
582 <span class="section-header-title" i18n-content="title" 598 <span class="section-header-title" i18n-content="title"
583 >TITLE</span> 599 >TITLE</span>
584 <span class="section-header-title" 600 <span class="section-header-title"
585 jsdisplay="extensions.length > 0">(<span 601 jsdisplay="extensions.length > 0">(<span
586 jscontent="extensions.length"></span>)</span> 602 jscontent="extensions.length"></span>)</span>
587 </td> 603 </td>
588 <td width="18" padding=""> 604 <td width="18" padding="">
589 <img id="collapse" class="developer-tools-image" 605 <img id="collapse" class="developer-mode-image"
590 style="display:none" onclick="toggleDeveloperTools();" 606 style="display:none" onclick="toggleDeveloperMode();"
591 src="minus.png" /> 607 src="minus.png" />
592 <img id="expand" class="developer-tools-image" 608 <img id="expand" class="developer-mode-image"
593 onclick="toggleDeveloperTools();" src="plus.png" /> 609 onclick="toggleDeveloperMode();" src="plus.png" />
594 </td> 610 </td>
595 <td width="50" align="right"> 611 <td width="50" align="right">
596 <div class="developer-tools-link"> 612 <div class="developer-mode-link">
597 <a onclick="toggleDeveloperTools();" style="cursor: default" 613 <a onclick="toggleDeveloperMode();" style="cursor: default"
598 i18n-content="devToolsLink">DEVTOOLS</a> 614 i18n-content="devModeLink">DEVMODE</a>
599 </div> 615 </div>
600 </td> 616 </td>
601 </tr> 617 </tr>
602 </table> 618 </table>
603 </div> 619 </div>
604 620
605 </div> 621 </div>
606 <div id="developer_tools" class="wbox-dev-tools showInDevMode"> 622 <div id="developer_tools" class="wbox-dev-mode showInDevMode">
607 <div class="developer-tools"> 623 <div class="developer-mode">
608 <span i18n-content="devToolsPrefix">DEVELOPER_TOOLS:</span> 624 <span i18n-content="devModePrefix">DEVELOPER_MODE:</span>
609 <button onclick="loadExtension()" 625 <button onclick="loadExtension()"
610 i18n-content="loadUnpackedButton">LOAD</button> 626 i18n-content="loadUnpackedButton">LOAD</button>
611 <button onclick="showPackDialog()" 627 <button onclick="showPackDialog()"
612 i18n-content="packButton">PACK</button> 628 i18n-content="packButton">PACK</button>
613 <button onclick="autoUpdate()" 629 <button onclick="autoUpdate()"
614 i18n-content="updateButton">UPDATE</button> 630 i18n-content="updateButton">UPDATE</button>
615 </div> 631 </div>
616 </div> 632 </div>
617 </div> 633 </div>
618 634
619 <div class="content"> 635 <div class="content">
620 <div class="extension-name" jsdisplay="extensions.length === 0" 636 <div class="extension-name" jsdisplay="extensions.length === 0"
621 i18n-content="noExtensions">NO_EXTENSIONS_ARE_INSTALLED</div> 637 i18n-content="noExtensions">NO_EXTENSIONS_ARE_INSTALLED</div>
622 638
623 <div jsdisplay="extensions.length > 0"> 639 <div jsdisplay="extensions.length > 0">
624 <div class="extension" jsselect="extensions"> 640 <div class="extension" jsselect="extensions">
625 <table width="100%" cellpadding="0" cellspacing="0"> 641 <table width="100%" cellpadding="2" cellspacing="0">
626 <tr> 642 <tr jsvalues=".className:'extension_enabled_' + enabled">
rafaelw 2009/11/04 22:24:40 nit: what happened to: enabled ? 'extension_enable
627 <td width="62" align="center" valign="top"> 643 <td width="62" height="50" align="center" valign="top">
628 <span jsdisplay="icon" 644 <span jsdisplay="icon"
629 ><img 645 ><img
630 jsvalues=".src:'chrome-extension://' + id + '/' + icon" 646 jsvalues=".src:'chrome-extension://' + id + '/' + icon"
631 width="48" height="48" /> 647 width="48" height="48" />
632 </span> 648 </span>
633 <span jsdisplay="icon == ''" 649 <span jsdisplay="icon == ''"
634 ><img 650 ><img
635 width="48" height="48" 651 width="48" height="48"
636 src="../../app/theme/infobar_plugin.png" /></span> 652 src="../../app/theme/infobar_plugin.png" /></span>
637 </td> 653 </td>
638 <td valign="top"> 654 <td valign="top">
639 <div> 655 <div>
640 <span class="extension-name" 656 <span class="extension-name"
641 jscontent="name">EXTENSION NAME</span> 657 jscontent="name">EXTENSION NAME</span>
642 <span i18n-content="extensionVersion">VERSION</span> 658 <span i18n-content="extensionVersion">VERSION</span>
643 <span jscontent="version">x.x.x.x</span> 659 <span jscontent="version">x.x.x.x</span>
644 <span jsdisplay="!enabled" 660 <span jsdisplay="!enabled"
645 i18n-content="extensionDisabled">(DISABLED)</span> 661 i18n-content="extensionDisabled">(DISABLED)</span>
662 <span jsdisplay="order == 1"
663 i18n-content="inDevelopment">(IN DEVELOPMENT)</span>
646 </div> 664 </div>
647 665
648 <div class="extension-description" jscontent="description"></div> 666 <div class="extension-description" jscontent="description"></div>
649 <div class="showInDevMode"> 667 <div class="showInDevMode">
650 <div class="extension-details"> 668 <div class="extension-details">
651 <span i18n-content="extensionId">ID_LABEL: </span> 669 <span i18n-content="extensionId">ID_LABEL: </span>
652 <span jscontent="id"></span> 670 <span jscontent="id"></span>
653 </div> 671 </div>
654 <div class="extension-details"> 672 <div class="extension-details">
655 <span jsdisplay="views.length > 0" i18n-content="inspectViews"> 673 <span jsdisplay="views.length > 0" i18n-content="inspectViews">
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
716 </td> 734 </td>
717 </tr> 735 </tr>
718 </table> 736 </table>
719 </div> 737 </div>
720 </div> 738 </div>
721 </div> 739 </div>
722 </div> 740 </div>
723 </div> 741 </div>
724 </body> 742 </body>
725 </html> 743 </html>
OLDNEW
« no previous file with comments | « chrome/browser/extensions/extensions_ui.cc ('k') | chrome/browser/resources/gray.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698