☰

CSS: m.facebook.com - cleaner UI

Corrections to UI of Facebook for mobile browsers: remove useless panels

  1. // ==UserScript==
  2. // @name          CSS: m.facebook.com - cleaner UI
  3. // @description   Corrections to UI of Facebook for mobile browsers: remove useless panels
  4. // @author        MK
  5. // @namespace     max44
  6. // @homepage      https://greasyfork.org/en/users/309172-max44
  7. // @match         *://m.facebook.com/*
  8. // @icon          https://static.xx.fbcdn.net/rsrc.php/yD/r/d4ZIVX-5C-b.ico
  9. // @version       1.3.3
  10. // @license       MIT
  11. // @require       https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  12. // @run-at        document-idle
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.  
  18.   var css = `
  19.   /*Remove MBackNavBar - back arrow header above the current message*/
  20.   #MBackNavBar {
  21.     visibility: hidden !important;
  22.     height: 0px !important;
  23.   }
  24.  
  25.   /*Remove mDialogHeader
  26.   #mDialogHeader {
  27.     visibility: hidden !important;
  28.     height: 0px !important;
  29.   }*/
  30.  
  31.   /*Remove MStoriesTray - box with various stories*/
  32.   #MStoriesTray {
  33.     visibility: hidden !important;
  34.     height: 0px !important;
  35.   }
  36.  
  37.   /*Remove conversation guides*/
  38.   /*#u_0_11, #u_jb_9, #u_1y_8*/
  39.   /*[id^="u_"][id$="_8"],
  40.   [id^="u_"][id$="_9"],
  41.   [id^="u_"][id$="_10"],
  42.   [id^="u_"][id$="_11"]*/
  43.   [class^="_7an"],
  44.   ._4l3w {
  45.     visibility: hidden !important;
  46.     height: 0px !important;
  47.   }
  48.  
  49.   /*Make smaller clickable area around "Like", "Reply" and "More"*/
  50.   a._2b0a {
  51.     padding: 3px 8px 3px 8px !important;
  52.     /*margin: 0px 0px 7px 0px;*/
  53.   }
  54.  
  55.   /*Correct place of comments switcher*/
  56.   div > div#add_comment_switcher_placeholder {
  57.     float: unset !important;
  58.     text-align: right !important;
  59.   }
  60.  
  61.   /*Make darker background for new interface header*/
  62.   /*#mJewelNav {
  63.     background: #e0eaf8 !important;
  64.   }*/
  65.  
  66.   /*Make header icons non-white to be visible on white background*/
  67.   #feed_jewel.hasCount > a > div > div {
  68.     background-position: 0 -609px !important;
  69.   }
  70.   #requests_jewel.hasCount > a > div > div {
  71.     background-position: 0 -273px !important;
  72.   }
  73.   #messages_jewel.hasCount > a > div > div {
  74.     background-position: 0 -42px !important;
  75.   }
  76.   #videos_tab_jewel.hasCount > a > div > div {
  77.     background-position: 0 -672px !important;
  78.   }
  79.   #notifications_jewel.hasCount > a > div > div {
  80.     background-position: 0 -126px !important;
  81.   }
  82.   #bookmarks_jewel.hasCount > a > div > div {
  83.     background-position: 0 -525px !important;
  84.   }
  85.   `;
  86.  
  87.   if (typeof GM_addStyle != 'undefined') {
  88.     GM_addStyle(css);
  89.   } else if (typeof PRO_addStyle != 'undefined') {
  90.     PRO_addStyle(css);
  91.   } else if (typeof addStyle != 'undefined') {
  92.     addStyle(css);
  93.   } else {
  94.     var node = document.createElement('style');
  95.     node.type = 'text/css';
  96.     node.appendChild(document.createTextNode(css));
  97.     document.documentElement.appendChild(node);
  98.   }
  99.  
  100.   var divSwitcher = null;
  101.   var divStory = null;
  102.   var divComments = null;
  103.   var i;
  104.  
  105.   const rootCallback = function (mutationsList, observer) {
  106.     moveCommentsSwitcher();
  107.   }
  108.  
  109.   const rootNode = document.querySelector("body");
  110.   if (rootNode != null) {
  111.     const rootObserver = new MutationObserver(rootCallback);
  112.     rootObserver.observe(rootNode, {childList: true, subtree: true});
  113.   }
  114.  
  115.   function moveCommentsSwitcher() {
  116.     var intervalCount = 0;
  117.  
  118.     let wait4Switcher = setInterval(function() { //Wait for switcher to load
  119.       intervalCount++;
  120.       divSwitcher = document.getElementById("add_comment_switcher_placeholder");
  121.  
  122.       if (divSwitcher != null) {
  123.         if (divSwitcher.getAttribute("moved-by-script") != "true") {
  124.           divStory = divSwitcher.parentNode;
  125.           divComments = null;
  126.           for (i = 0; i < divStory.childNodes.length; i++) {
  127.             if (divStory.childNodes[i].className.indexOf("_333v _45kb") > -1) { //Section to put comments switcher before
  128.               divComments = divStory.childNodes[i];
  129.               break;
  130.             }
  131.           }
  132.           if (divComments != null) {
  133.             divSwitcher.setAttribute("moved-by-script", "true"); //In order not to process it many times
  134.             divStory.insertBefore(divSwitcher, divComments);
  135.             clearInterval(wait4Switcher); //Stop waiting if placeholder has been just moved
  136.           }
  137.         } else clearInterval(wait4Switcher); //Stop waiting if placeholder has been already moved previously
  138.       }
  139.       if (intervalCount > 50) clearInterval(wait4Switcher); //Stop waiting for too long
  140.     }, 250); //Interval to check
  141.   }
  142.  
  143.   /*let waitForStory = setInterval(function() { //Check page content constantly
  144.     divSwitcher = document.getElementById("add_comment_switcher_placeholder:not([moved-by-script])");
  145.  
  146.     if (divSwitcher != null && divSwitcher.getAttribute("moved-by-script") != "true") {
  147.       divStory = divSwitcher.parentNode;
  148.       for (i = 0; i < divStory.childNodes.length; i++) {
  149.         if (divStory.childNodes[i].className.indexOf("_333v _45kb") > -1) { //Section to put comments switcher before
  150.           divComments = divStory.childNodes[i];
  151.           break;
  152.         }
  153.       }
  154.       if (divComments != null) {
  155.         divSwitcher.setAttribute("moved-by-script", "true"); //In order not to process it many times
  156.         divStory.insertBefore(divSwitcher, divComments);
  157.         clearInterval(waitForStory); //Stop waiting
  158.       }
  159.     }
  160.   }, 500); //Interval to check page content*/
  161.  
  162. })();