Better Google Groups

better-google-groups.user.js

// ==UserScript==
// @name           Better Google Groups
// @namespace      http://uu59.org/
// @version        1.0.0
// @include        http://productforums.google.com/forum/*
// ==/UserScript==

function addStyle(css) {
  var id = "better-google-groups";
  var style = document.querySelector('#' + id);
  if(!style) {
    style = document.createElement('style');
    style.id = id
    style.type = "text/css";
    document.querySelector('head, body').appendChild(style);
  }
  style.appendChild(document.createTextNode(css));
}

// hide up/down vote
addStyle('.GPKLX1XCY { display: none; }');

// hide User Level
addStyle('.GPKLX1XLBB { display: none !important; } ');

// highlight clickable area at each post
addStyle('.GPKLX1XL0 { background-color: #f0f0f0; }');

// remove ugly padding
addStyle('.GPKLX1XL0 { padding: 0; }');


// pad each post
addStyle('.GPKLX1XM0{ padding: 1ex 0; }');
addStyle('.GPKLX1XC0{ margin-bottom: 1em; }');

// kill user icon padding
addStyle('.GPKLX1XC- { padding: 0 !important; }');

// remove each post separator border
addStyle('.GPKLX1XD1 { border: none !important; }');

// remake selected post highlight
addStyle('.GPKLX1XE1 { border-left: none; background-color: #f9f9f0; }');

// remove focus outline
addStyle('.GPKLX1XM0:focus, .GPKLX1XM0 *:focus{ outline: none; }');

// justify user name and posted date
addStyle('.GPKLX1XL0 td { vertical-align: middle !important; }');

// make user icon smaller
addStyle('.GPKLX1XC- img { '+
  'width: 24px !important; height: 24px !important;'+ // user specified icon
  'background-position: -4px -4px !important;} '+ // default icon
  ''
);

// each post operation area
addStyle('.GPKLX1XFY { margin-top: 0 !important;}');

// hide referal page screenshot
addStyle('.GPKLX1XB- a[target] img { display: none;}');
addStyle('.GPKLX1XB- br { display: none;}');

// independent permalink popup & expand/collapse toggle button 
// NOTE: header size is depend on your browser size
// .gbem#gb, .gbemi#gb { height: xxx; } is 102px or 70px
(function(){
  var timer;
  function adjust() {
    if(timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
      var headerHeight = document.querySelector('#gb').clientHeight;
      var position = (headerHeight == 102 ? 120 : 82);
      addStyle('.GPKLX1XNKB { position: fixed; top: '+position+'px; left: '+position+'px; }');
    }, 0);
  }
  window.addEventListener('resize', adjust, false);
  adjust();
})();


// overview: re-order sections
document.addEventListener('DOMNodeInserted', function(ev){
  // known issue: doesn't re-order sections when toggle overview and discussion at odd times (1,3,5, .. )
  var src = ev.target;
  if(!src.nodeName || !src.classList) {
    return ;
  }
  var sectionsWrapper;
  var wrapperClass = 'GPKLX1XAKB';
  if(src.classList.contains(wrapperClass)) {
    sectionsWrapper = src;
  }
  sectionsWrapper = src.querySelector('.' + wrapperClass);
  if(!sectionsWrapper) return ;

  var sections = sectionsWrapper.parentNode.querySelectorAll('.'+ wrapperClass + ' > .GPKLX1XBKB');
  // default order is "root post", "members", "links", "tree"
  // so I'll re-order them to "root post", "tree", "links", "members",
  setTimeout(function(){
    sectionsWrapper.insertBefore(sections[3], sections[1]);
    sectionsWrapper.insertBefore(sections[2], sections[1]);
  }, 0);
}, false);

manifest.json

{
  "manifest_version": 2,
  "name": "Better Google Groups",
  "version": "1.0.0",
  "description": "Better Google Groups",
  "icons": 
  {
  },
  "content_scripts": [
    {
      "js": [
        "better-google-groups.user.js"
      ],
      "matches": [
        "http://productforums.google.com/forum/*",
        "https://groups.google.com/forum/*"
      ]
    }
  ]
}

screenshot.png

hi :) how to incorporate this with the google groups? I embedded the group into an html page, and would like to use your styling :) thanks a lot!