IITC Dialog Overhaul, part 2

Core changes
* window_management.js => panes.js (clarity, distinction from dialogs)
* Make portal preview use dialogs instead of the large preview "window"
* Use `open' callback instead of `create' callback for all dialogs
* Replace collapse/close buttons with themed buttons inspired by the AP Gain plugin
* Dialogs can now gain and lose focus, with changing title bar
* Tweak the Poslinks window to use dialogs
* Add collapseCallback, expandCallback, collapseExpandCallback, focusCallback, and blurCallback
* Fix http <img> in About dialog that caused Chrome to complain

Plugin changes
* guess-player-level 0.4.1: Use dialogs with titles, typo fix
* portal-counts 0.0.8: Use dialogs with titles, typo fix
* portals-list 0.0.12: Don't hijack every single dialog onscreen, add titles, typo fix
* scoreboard 0.1.8: Use dialogs with titles

code/boot.js

@@ -27,24 +27,22 @@ window.setupBackButton = function() {
   }
 }
 
-
-
-
 window.setupLargeImagePreview = function() {
   $('#portaldetails').on('click', '.imgpreview', function() {
-    var ex = $('#largepreview');
-    if(ex.length > 0) {
-      ex.remove();
-      return;
-    }
     var img = $(this).find('img')[0];
-    var w = img.naturalWidth/2;
+    var w = img.naturalWidth, c = $('#portaldetails').attr('class');
-    var h = img.naturalHeight/2;
+    var d = dialog({
-    var c = $('#portaldetails').attr('class');
+      html: '<span class="' + c + '" style="position: relative; width: 100%; left: 50%; margin-left: ' + -(w / 2) + 'px;">' + img.outerHTML + '</span>',
-    $('body').append(
+      title: $(this).parent().find('h3.title').html()
-      '<div id="largepreview" class="'+c+'" style="margin-left: '+(-SIDEBAR_WIDTH/2-w-2)+'px; margin-top: '+(-h-2)+'px">' + img.outerHTML + '</div>'
+    });
-    );
+
-    $('#largepreview').click(function() { $(this).remove() });
+    // We have to dynamically set the width of this dialog, so get the .ui-dialog component
+    var p = d.parents('.ui-dialog');
+
+    // Don't let this dialog get smaller than the default maximum dialog width
+    var width = Math.max(parseInt(p.css('max-width')), w);
+    p.css('min-width', width + 'px');
+    p.css('width', width + 'px');
    });
 }
 

code/dialog.js

@@ -1,5 +1,6 @@
 // DIALOGS /////////////////////////////////////////////////////////
 // Inspired by TES III: Morrowind. Long live House Telvanni. ///////
+////////////////////////////////////////////////////////////////////
 
 /* The global ID of onscreen dialogs.
  * Starts at 0.
@@ -10,15 +11,33 @@ window.DIALOG_ID = 0;
  */
 window.DIALOGS = {};
 
-/* Creates a dialog and puts it onscreen. Takes one argument: options.
+/* The number of dialogs on screen.
- * Here are the most commonly used ones:
+ */
- *
+window.DIALOG_COUNT = 0;
+
+/* The dialog that has focus.
+ */
+window.DIALOG_FOCUS = null;
+
+/* Creates a dialog and puts it onscreen. Takes one argument: options, a JS object.
+ * == Common options
  * (text|html): The text or HTML to display in the dialog. Text is auto-converted to HTML.
  * title: The dialog's title.
- * closeCallback: A callback to run on close.
  * modal: Whether to open a modal dialog. Implies draggable=false; dialogClass='ui-dialog-modal'.
  *        Please note that modal dialogs hijack the entire screen and should only be used in very
  *        specific cases. (If IITC is running on mobile, modal will always be true).
+ * id:   A unique ID for this dialog. If a dialog with id `id' is already open and dialog() is called
+ *       again, it will be automatically closed.
+ *
+ * == Callbacks
+ * closeCallback: A callback to run on close. Takes no arguments.
+ * collapseCallback: A callback to run on dialog collapse.  Takes no arguments.
+ * expandCallback:   A callback to run on dialog expansion. Takes no arguments.
+ * collapseExpandCallback: A callback to run on both collapse and expand (overrides collapseCallback
+ *                         and expandCallback, takes a boolean argument `collapsing' - true if collapsing;
+ *                         false if expanding)
+ * focusCallback: A callback to run when the dialog gains focus.
+ * blurCallback:  A callback to run when the dialog loses focus.
  *
  * See http://docs.jquery.com/UI/API/1.8/Dialog for a list of all the options. If you previously
  * applied a class to your dialog after creating it with alert(), dialogClass may be particularly
@@ -31,7 +50,8 @@ window.dialog = function(options) {
     options.modal = true;
   }
 
-  var id = 'dialog-' + (options.modal ? 'modal' : window.DIALOG_ID++);
+  // Build an identifier for this dialog
+  var id = 'dialog-' + (options.modal ? 'modal' : (options.id ? options.id : 'anonymous-' + window.DIALOG_ID++));
   var jqID = '#' + id;
   var html = '';
 
@@ -49,23 +69,35 @@ window.dialog = function(options) {
   if(options.modal) {
     options.dialogClass = 'ui-dialog-modal';
     options.draggable = false;
+    options.resizable = false;
+  }
+
+  // Close out existing dialogs.
+  if(window.DIALOGS[id]) {
+    try {
+      window.DIALOGS[id].dialog('close');
+    } catch(err) {
+      // This dialog doesn't exist anyway
+    }
   }
 
   // Create the window, appending a div to the body
   $('body').append('<div id="' + id + '"></div>');
-  window.DIALOGS[id] = $(jqID).dialog($.extend(true, {
+  var dialog = $(jqID).dialog($.extend(true, {
     autoOpen: false,
     modal: false,
     draggable: true,
+    resizable: true,
+    closeText: '&nbsp;',
     title: '#<Dialog: ' + id + '>',
-    closeText: 'X',
     buttons: {
       'OK': function() {
         $(this).dialog('close');
       }
     },
-    create: function(event, ui) {
+    open: function() {
       var titlebar = $(this).closest('.ui-dialog').find('.ui-dialog-titlebar');
+      titlebar.find('.ui-dialog-title').addClass('ui-dialog-title-active');
       var close = titlebar.find('.ui-dialog-titlebar-close');
 
       // Title should not show up on mouseover
@@ -76,17 +108,33 @@ window.dialog = function(options) {
         var collapse = close.clone();
 
         // Change it into a collapse button and set the click handler
-        collapse.addClass('ui-dialog-titlebar-button-collapse');
+        collapse.addClass('ui-dialog-titlebar-button-collapse ui-dialog-titlebar-button-collapse-expanded');
-        collapse.find('.ui-button-text').html('&ndash;');
         collapse.click($.proxy(function() {
           var collapsed = ($(this).data('collapsed') === true);
 
-          // Find the button pane and content dialog in this ui-dialog, and add or remove the 'hidden' class
+          // Run callbacks if we have them
-          var selector = $(this).closest('.ui-dialog').find('.ui-dialog-content,.ui-dialog-buttonpane');
+          if($(this).data('collapseExpandCallback')) {
+            $.proxy($(this).data('collapseExpandCallback'), this)(!collapsed);
+          } else {
+            if(collapsed && $(this).data('collapseCallback')) {
+              $.proxy($(this).data('collapseCallback'), this)();
+            } else if (!collapsed && $(this).data('expandCallback')) {
+              $.proxy($(this).data('expandCallback'), this)();
+            }
+          }
+
+          // Find the button pane and content dialog in this ui-dialog, and add or remove the 'hidden' class.
+          var dialog   = $(this).closest('.ui-dialog');
+          var selector = dialog.find('.ui-dialog-content,.ui-dialog-buttonpane');
+          var button   = dialog.find('.ui-dialog-titlebar-button-collapse');
           if (collapsed) {
             $(selector).removeClass('ui-dialog-content-hidden');
+            $(button).removeClass('ui-dialog-titlebar-button-collapse-collapsed');
+            $(button).addClass('ui-dialog-titlebar-button-collapse-expanded');
           } else {
             $(selector).addClass('ui-dialog-content-hidden');
+            $(button).removeClass('ui-dialog-titlebar-button-collapse-expanded');
+            $(button).addClass('ui-dialog-titlebar-button-collapse-collapsed');
           }
 
           // Toggle collapsed state
@@ -97,41 +145,77 @@ window.dialog = function(options) {
         titlebar.prepend(collapse);
         close.addClass('ui-dialog-titlebar-button-close');
       }
-    },
-    close:  function(event, ui) {
-      // We're closing, so log it to the console
-      console.log('window.dialog: ' + id + ' (' + $(this).dialog('option', 'title') + ') closed.');
 
+      window.DIALOG_COUNT++;
+
+      console.log('window.dialog: ' + $(this).data('id') + ' (' + $(this).dialog('option', 'title') + ') opened. ' + window.DIALOG_COUNT + ' remain.');
+    },
+    close:  function() {
       // Run the close callback if we have one
       if($(this).data('closeCallback')) {
         $.proxy($(this).data('closeCallback'), this)();
       }
 
-      // Remove this window
+      // Make sure that we don't keep a dead dialog in focus
-      $($(this).data('jqID')).remove();
+      if(window.DIALOG_FOCUS && $(window.DIALOG_FOCUS).data('id') === $(this).data('id')) {
+        window.DIALOG_FOCUS = null;
+      }
+
+      // Finalize
       delete window.DIALOGS[$(this).data('id')];
+
+      window.DIALOG_COUNT--;
+      console.log('window.dialog: ' + $(this).data('id') + ' (' + $(this).dialog('option', 'title') + ') closed. ' + window.DIALOG_COUNT + ' remain.');
+    },
+    focus: function() {
+      if($(this).data('focusCallback')) {
+        $.proxy($(this).data('focusCallback'), this)();
+      }
+
+      // Blur the window currently in focus unless we're gaining focus
+      if(window.DIALOG_FOCUS && $(window.DIALOG_FOCUS).data('id') !== $(this).data('id')) {
+        $.proxy(function(event, ui) {
+          if($(this).data('blurCallback')) {
+            $.proxy($(this).data('blurCallback'), this)();
+          }
+
+          $(this).closest('.ui-dialog').find('.ui-dialog-title').removeClass('ui-dialog-title-active').addClass('ui-dialog-title-inactive');
+        }, window.DIALOG_FOCUS)();
+      }
+
+      // This dialog is now in focus
+      window.DIALOG_FOCUS = this;
+      $(this).closest('.ui-dialog').find('.ui-dialog-title').removeClass('ui-dialog-title-inactive').addClass('ui-dialog-title-active');
     }
   }, options));
 
-  // Set HTML and IDs
+  window.DIALOGS[id] = dialog[0];
-  $(jqID).html(html);
-  $(jqID).data('id', id);
-  $(jqID).data('jqID', jqID);
 
-  // Set the callback to be executed on close
+  // Set HTML and IDs
-  $(jqID).data('closeCallback', options.closeCallback);
+  dialog.html(html);
+  dialog.data('id', id);
+  dialog.data('jqID', jqID);
+
+  // Set callbacks
+  dialog.data('closeCallback', options.closeCallback);
+  dialog.data('collapseCallback', options.collapseCallback);
+  dialog.data('expandCallback', options.expandCallback);
+  dialog.data('collapseExpandCallback', options.collapseExpandCallback);
+  dialog.data('focusCallback', options.focusCallback);
+  dialog.data('blurCallback', options.blurCallback);
 
   // ui-modal includes overrides for modal dialogs
   if (options.modal) {
-    $(jqID).parent().addClass('ui-modal');
+    dialog.parent().addClass('ui-modal');
   }
 
   // Enable snapping
-  $(jqID).dialog().parents('.ui-dialog').draggable('option', 'snap', true);
+  dialog.dialog().parents('.ui-dialog').draggable('option', 'snap', true);
 
   // Run it
-  $(jqID).dialog('open');
+  dialog.dialog('open');
-  return $(jqID);
+
+  return dialog;
 }
 
 /* Creates an alert dialog with default settings.
@@ -145,10 +229,12 @@ window.alert = function(text, isHTML, closeCallback) {
     obj.text = text;
   }
 
-  window.dialog(obj);
+  return dialog(obj);
 }
 
 window.setupDialogs = function() {
   window.DIALOG_ID = 0;
-  window.DIALOGS   = {};
+  window.DIALOGS   = {}
+  window.DIALOG_COUNT = 0;
+  window.DIALOG_FOCUS = null;
 }

code/portal_detail_display.js

@@ -18,7 +18,7 @@ window.renderPortalDetails = function(guid) {
   if(d.portalV2.linkedEdges) $.each(d.portalV2.linkedEdges, function(ind, link) {
     links[link.isOrigin ? 'outgoing' : 'incoming']++;
   });
-  function linkExpl(t) { return '<tt title="↳ incoming links\n↴ outgoing links\n• is meant to be the portal.">'+t+'</tt>'; }
+  function linkExpl(t) { return '<tt title="↳ incoming links\n↴ outgoing links\n• is the portal">'+t+'</tt>'; }
   var linksText = [linkExpl('links'), linkExpl(' ↳ ' + links.incoming+'&nbsp;&nbsp;•&nbsp;&nbsp;'+links.outgoing+' ↴')];
 
   var player = d.captured && d.captured.capturingPlayerId
@@ -50,14 +50,13 @@ window.renderPortalDetails = function(guid) {
   var perma = '/intel?ll='+lat+','+lng+'&z=17&pll='+lat+','+lng;
   var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."';
   var poslinks = 'window.showPortalPosLinks('+lat+','+lng+',\'' + d.portalV2.descriptiveText.TITLE + '\')';
-  var postcard = 'Send in a postcard. Will put it online after receiving. Address:\\n\\nStefan Breunig\\nINF 305 – R045\\n69120 Heidelberg\\nGermany';
 
   $('#portaldetails')
     .attr('class', TEAM_TO_CSS[getTeam(d)])
     .html(''
       + '<h3 class="title">'+d.portalV2.descriptiveText.TITLE+'</h3>'
       + '<span class="close" onclick="unselectOldPortal();" title="Close">X</span>'
-      // help cursor via “.imgpreview img”
+      // help cursor via ".imgpreview img"
       + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
       + '<img class="hide" src="'+img+'"/>'
       + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
@@ -73,7 +72,7 @@ window.renderPortalDetails = function(guid) {
     );
 
   // try to resolve names that were required for above functions, but
-  // weren’t available yet.
+  // weren't available yet.
   resolvePlayerNames();
 
   runHooks('portalDetailsUpdated', {portalDetails: d});
@@ -107,7 +106,7 @@ window.clearPortalIndicators = function() {
 
 // highlights portal with given GUID. Automatically clears highlights
 // on old selection. Returns false if the selected portal changed.
-// Returns true if it’s still the same portal that just needs an
+// Returns true if it's still the same portal that just needs an
 // update.
 window.selectPortal = function(guid) {
   var update = selectedPortal === guid;

code/utils_misc.js

@@ -19,7 +19,7 @@ window.aboutIITC = function(){
   + '     </ul>'
   + '  </div>'
   + '  <div>'
-  + '    MapQuest OSM tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'
+  + '    MapQuest OSM tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">'
   + '  </div>'
   + '  <hr>'
   + '  <div>Version: ' + v + '</div>'
@@ -139,19 +139,23 @@ window.rangeLinkClick = function() {
 }
 
 window.showPortalPosLinks = function(lat, lng, name) {
-  var portal_name = '';
+  var encoded_name = '';
   if(name !== undefined) {
-    portal_name = encodeURIComponent(' (' + name + ')');
+    encoded_name = encodeURIComponent(' (' + name + ')');
   }
   if (typeof android !== 'undefined' && android && android.intentPosLink) {
     android.intentPosLink(lat, lng, portal_name);
   } else {
     var qrcode = '<div id="qrcode"></div>';
     var script = '<script>$(\'#qrcode\').qrcode({text:\'GEO:'+lat+','+lng+'\'});</script>';
-    var gmaps = '<a href="https://maps.google.com/?q='+lat+','+lng+portal_name+'">Google maps</a>';
+    var gmaps = '<a href="https://maps.google.com/?q='+lat+','+lng+encoded_name+'">Google Maps</a>';
     var osm = '<a href="http://www.openstreetmap.org/?mlat='+lat+'&mlon='+lng+'&zoom=16">OpenStreetMap</a>';
-    var latLng = '<span>'+lat+','+lng +'</span>';
+    var latLng = '<span>&lt;' + lat + ',' + lng +'&gt;</span>';
-    alert('<div style="text-align: center;">' + qrcode + script + gmaps + ' ' + osm + '<br />' + latLng + '</div>');
+    dialog({
+      html: '<div style="text-align: center;">' + qrcode + script + gmaps + '; ' + osm + '<br />' + latLng + '</div>',
+      title: name,
+      id: 'poslinks'
+    });
   }
 }
 

plugins/guess-player-levels.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @id             iitc-plugin-guess-player-levels@breunigs
 // @name           IITC plugin: guess player level
-// @version        0.4.0.@@DATETIMEVERSION@@
+// @version        0.4.1.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -101,7 +101,7 @@ window.plugin.guessPlayerLevels.guess = function() {
     });
   });
 
-  var s = 'the players have at least the following level:\n\n';
+  var s = 'Players have at least the following level:\n\n';
   s += 'Resistance:\t   \tEnlightened:\t\n';
 
   var namesR = plugin.guessPlayerLevels.sort(playersRes);
@@ -132,7 +132,10 @@ window.plugin.guessPlayerLevels.guess = function() {
   s += '\nAverage level:\t'+averageR.toFixed(2)+'\tAverage level:\t'+averageE.toFixed(2);
   s += '\n\nIf there are some unresolved names, simply try again.'
   //console.log(s);
-  alert(s);
+  dialog({
+    text: s,
+    title: 'Player levels: R' + averageR.toFixed(2) + ', E' + averageE.toFixed(2)
+  });
 }
 
 window.plugin.guessPlayerLevels.sort = function(playerHash) {

plugins/portal-counts.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @id             iitc-plugin-portals-count@yenky
 // @name           IITC plugin: Show total counts of portals
-// @version        0.0.7.@@DATETIMEVERSION@@
+// @version        0.0.8.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -13,6 +13,7 @@
 // ==/UserScript==
 
 /* whatsnew
+* 0.0.8 : use dialog() instead of alert()
 * 0.0.6 : ignoring outside bounds portals (even if close to)
 * 0.0.5 : changed table layout, added some colors
 * 0.0.4 : reverse show order of portals, using MAX_PORTAL_LEVEL now for array, changed table layout to be more compact, cleaned up code
@@ -74,7 +75,7 @@ window.plugin.portalcounts.getPortals = function(){
 
   var counts = '<table>';
   if(retval) {
-    counts += '<tr><th></th><th class="enl">Enlightment</th><th class="res">Resistance</th></tr>';  //'+window.plugin.portalcounts.enlP+' Portal(s)</th></tr>';
+    counts += '<tr><th></th><th class="enl">Enlightened</th><th class="res">Resistance</th></tr>';  //'+window.plugin.portalcounts.enlP+' Portal(s)</th></tr>';
     for(var level = window.MAX_PORTAL_LEVEL; level > 0; level--){
       counts += '<tr><td class="L'+level+'">Level '+level+'</td>';
       if(minlvl > level)
@@ -90,12 +91,18 @@ window.plugin.portalcounts.getPortals = function(){
     else
       counts += window.plugin.portalcounts.neuP;
     counts += ' Portal(s)</td></tr>';
-    counts += '<tr class="enl"><th colspan="2">Enlightment:</th><td>'+window.plugin.portalcounts.enlP+' Portal(s)</td></tr>';
+    counts += '<tr class="enl"><th colspan="2">Enlightened:</th><td>'+window.plugin.portalcounts.enlP+' Portal(s)</td></tr>';
     counts += '<tr class="res"><th colspan="2">Resistance:</th><td>'+window.plugin.portalcounts.resP+' Portal(s)</td></tr>';
   } else
     counts += '<tr><td>No Portals in range!</td></tr>';
   counts += '</table>';
-  alert('<div id="portalcounts">'+counts+'</div>');
+
+
+  var total = window.plugin.portalcounts.enlP + window.plugin.portalcounts.resP + window.plugin.portalcounts.neuP;
+  dialog({
+    html: '<div id="portalcounts">' + counts + '</div>',
+    title: 'Portal counts: ' + total + ' ' + (total == 1 ? 'portal' : 'portals'),
+  });
 }
 
 var setup =  function() {

plugins/portals-list.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @id             iitc-plugin-portals-list@teo96
 // @name           IITC plugin: show list of portals
-// @version        0.0.11.@@DATETIMEVERSION@@
+// @version        0.0.12.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -13,6 +13,7 @@
 // ==/UserScript==
 
 /* whatsnew
+* 0.0.12: Use dialog() instead of alert so the user can drag the box around
 * 0.0.11: Add nominal energy column and # links, fix sort bug when opened even amounts of times, nits
 * 0.0.10: Fixed persistent css problem with alert
 * 0.0.9 : bugs hunt
@@ -120,13 +121,15 @@ window.plugin.portalslist.displayPL = function() {
   if (window.plugin.portalslist.getPortals()) {
     html += window.plugin.portalslist.portalTable('level', window.plugin.portalslist.sortOrder,window.plugin.portalslist.filter);
   } else {
-    html = '<table><tr><td>Nothing to Show !</td></tr></table>';
+    html = '<table><tr><td>Nothing to show!</td></tr></table>';
   };
-  alert('<div id="portalslist">' + html + '</div>', true, function() {
+
-      $(".ui-dialog").removeClass('ui-dialog-portalslist');
+  dialog({
-      $(document).off('.portalslist');
+    html: '<div id="portalslist">' + html + '</div>',
+    dialogClass: 'ui-dialog-portalslist',
+    title: 'Portal list: ' + window.plugin.portalslist.listPortals.length + ' ' + (window.plugin.portalslist.listPortals.length == 1 ? 'portal' : 'portals'),
+    id: 'portal-list'
   });
-  $(".ui-dialog").addClass('ui-dialog-portalslist');
 
   // Setup sorting
   $(document).on('click.portalslist', '#portalslist table th', function() {
@@ -264,7 +267,7 @@ window.plugin.portalslist.portalTable = function(sortBy, sortOrder, filter) {
   html += '</table>';
 
   html += '<div class="disclaimer">Click on portals table headers to sort by that column. '
-    + 'Click on <b>All Portals, Resistant Portals, Enlightened Portals</b> to filter<br>'
+    + 'Click on <b>All Portals, Resistance Portals, Enlightened Portals</b> to filter<br>'
     + 'Thanks to @vita10gy & @xelio for their IITC plugins who inspired me. A <a href="https://plus.google.com/113965246471577467739">@teo96</a> production. Vive la Résistance !</div>';
 
   window.plugin.portalslist.sortOrder = window.plugin.portalslist.sortOrder*-1;
@@ -275,7 +278,7 @@ window.plugin.portalslist.stats = function(sortBy) {
   //console.log('** stats');
   var html = '<table><tr>'
   + '<td class="filterAll" style="cursor:pointer"  onclick="window.plugin.portalslist.portalTable(\'level\',-1,0)"><a href=""></a>All Portals : (click to filter)</td><td class="filterAll">' + window.plugin.portalslist.listPortals.length + '</td>'
-  + '<td class="filterRes" style="cursor:pointer" class="sorted" onclick="window.plugin.portalslist.portalTable(\'level\',-1,1)">Resistant Portals : </td><td class="filterRes">' + window.plugin.portalslist.resP +' (' + Math.floor(window.plugin.portalslist.resP/window.plugin.portalslist.listPortals.length*100) + '%)</td>' 
+  + '<td class="filterRes" style="cursor:pointer" class="sorted" onclick="window.plugin.portalslist.portalTable(\'level\',-1,1)">Resistance Portals : </td><td class="filterRes">' + window.plugin.portalslist.resP +' (' + Math.floor(window.plugin.portalslist.resP/window.plugin.portalslist.listPortals.length*100) + '%)</td>' 
   + '<td class="filterEnl" style="cursor:pointer" class="sorted" onclick="window.plugin.portalslist.portalTable(\'level\',-1,2)">Enlightened Portals : </td><td class="filterEnl">'+ window.plugin.portalslist.enlP +' (' + Math.floor(window.plugin.portalslist.enlP/window.plugin.portalslist.listPortals.length*100) + '%)</td>'  
   + '</tr>'
   + '</table>';
@@ -318,7 +321,7 @@ window.plugin.portalslist.getPortalLink = function(portal,guid) {
 var setup =  function() {
   $('#toolbox').append(' <a onclick="window.plugin.portalslist.displayPL()" title="Display a list of portals in the current view">Portals list</a>');
   $('head').append('<style>' +
-    '.ui-dialog-portalslist {position: absolute !important; top: 10px !important; left: 30px !important;max-width:800px !important; width:auto !important;}' +
+    '.ui-dialog-portalslist {max-width: 800px !important; width: auto !important;}' +
     '#portalslist table {margin-top:5px; border-collapse: collapse; empty-cells: show; width:100%; clear: both;}' +
     '#portalslist table td, #portalslist table th {border-bottom: 1px solid #0b314e; padding:3px; color:white; background-color:#1b415e}' +
     '#portalslist table tr.res td {  background-color: #005684; }' +

plugins/scoreboard.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @id             iitc-plugin-scoreboard@vita10gy
 // @name           IITC plugin: show a localized scoreboard.
-// @version        0.1.7.@@DATETIMEVERSION@@
+// @version        0.1.8.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -298,6 +298,7 @@ window.plugin.scoreboard.display = function() {
   var resMu = scores['team'][TEAM_RES]['mu'];
   var enlMu = scores['team'][TEAM_ENL]['mu'];
   var scoreHtml = '';
+  var title = '';
   
   if(somethingInView) {
   
@@ -307,6 +308,10 @@ window.plugin.scoreboard.display = function() {
         + window.plugin.scoreboard.percentSpan(resMuPercent, 'res')
         + window.plugin.scoreboard.percentSpan(100-resMuPercent, 'enl')
         + '</div>';
+      title = window.digits(resMu) + ' R (' + resMuPercent + '%), ' + window.digits(enlMu) + ' E (' + (100-resMuPercent) + '%)';
+    }
+    else {
+      title = 'no MU in view';
     }
     
     scoreHtml += '<table>'
@@ -362,10 +367,15 @@ window.plugin.scoreboard.display = function() {
       + 'If names are unresolved try again. For best results wait until updates are fully loaded.</div>';
   } else {
     scoreHtml += 'You need something in view.';
+    title = 'nothing in view';
   }
   
-  alert('<div id="scoreboard">' + scoreHtml + '</div>', true, function() {$(".ui-dialog").removeClass('ui-dialog-scoreboard');});
+  dialog({
-  $(".ui-dialog").addClass('ui-dialog-scoreboard');
+    html: '<div id="scoreboard">' + scoreHtml + '</div>',
+    title: 'Scoreboard: ' + title,
+    dialogClass: 'ui-dialog-scoreboard',
+    id: 'scoreboard'
+  });
 
   // Setup sorting
   $(document).on('click', '#players table th', function() {
@@ -393,7 +403,7 @@ window.plugin.scoreboard.fieldArea = function(field) {
 var setup =  function() {
   $('#toolbox').append(' <a onclick="window.plugin.scoreboard.display()" title="Display a scoreboard per team for the current view">Scoreboard</a>');
   $('head').append('<style>' +
-    '.ui-dialog-scoreboard {max-width:600px !important; width:600px !important;}' +
+    '.ui-dialog-scoreboard {width: auto !important; min-width: 400px !important; max-width: 600px !important;}' +
     '#scoreboard table {margin-top:10px;	border-collapse: collapse; empty-cells: show; width:100%; clear: both;}' +
     '#scoreboard table td, #scoreboard table th {border-bottom: 1px solid #0b314e; padding:3px; color:white; background-color:#1b415e}' +
     '#scoreboard table tr.res td { background-color: #005684; }' +

style.css

@@ -699,7 +699,8 @@ h3 {
   background-color: rgba(8, 48, 78, 0.9);  /* as some images - eg ZipCar - have transparency */
 }
 
-/* tooltips, dialogs */
+/* Dialogs
+ */
 .ui-tooltip, .ui-dialog {
   max-width: 300px;
   position: absolute;
@@ -747,6 +748,7 @@ h3 {
   text-align: center;
   padding: 4px;
   background-color: rgba(8, 60, 78, 0.9);
+  min-width: 250px;
 }
 
 .ui-dialog-title {
@@ -754,26 +756,45 @@ h3 {
   font-weight: bold;
 }
 
+.ui-dialog-title-active {
+  color: #ffce00;
+}
+
+.ui-dialog-title-inactive {
+  color: #ffffff;
+}
+
 .ui-dialog-titlebar-button {
   position: absolute;
-  float: left;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
   width: 17px;
-  height: 19px;
+  height: 17px;
-  top: 2px;
+  top: 3px;
   cursor: pointer;
-  color: #FFCE00;
+  border: 1px solid rgb(32, 168, 177);
-  font-family: "Arial", sans;
-  font-size: 14px;
-  border-style: none;
   background-color: rgba(0, 0, 0, 0);
 }
 
+.ui-dialog-titlebar-button:active {
+  background-color: rgb(32, 168, 177);
+}
+
 .ui-dialog-titlebar-button-close {
   right: 4px;
 }
 
 .ui-dialog-titlebar-button-collapse {
-  right: 28px;
+  right: 25px;
+}
+
+.ui-dialog-titlebar-button-collapse-expanded {
+
+}
+
+.ui-dialog-titlebar-button-collapse-collapsed {
+   background-color: rgb(32, 168, 177);
 }
 
 .ui-dialog-content {
@@ -811,8 +832,9 @@ h3 {
 }
 
 .ui-dialog-aboutIITC {
+  width: auto !important;
+  min-width: 400px !important;
   max-width: 600px !important;
-  width: 600px !important;
 }
 
 td {