☰

BigQuery Platform Modifier

BigQuery Platform Modifier modifies BigQuery Platform to display panels side by side.

当前为 2020-12-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         BigQuery Platform Modifier
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.6.2
  5. // @description  BigQuery Platform Modifier modifies BigQuery Platform to display panels side by side.
  6. // @author       Hubertokf
  7. // @match        *://console.cloud.google.com/bigquery*
  8. // @grant        none
  9. // @grant		 GM_addStyle
  10. // @grant		 GM_getValue
  11. // @grant		 GM_setValue
  12. // @require      http://code.jquery.com/jquery-3.4.1.min.js
  13. // @require      https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.     var $ = window.jQuery;
  19.  
  20.     function waitForElementToDisplay(selector, time) {
  21.         if(document.querySelector(selector)!=null) {
  22.             addBqSidePanels();
  23.             if(document.querySelector('.darkModeBTText')==null) {
  24.                 // Starts listening for changes in the root HTML element of the page.
  25.                 addBqDarkMode();
  26.             }
  27.             waitFor('.left-pannel', 2000);
  28.             return;
  29.         }
  30.         else {
  31.             setTimeout(function() {
  32.                 waitForElementToDisplay(selector, time);
  33.             }, time);
  34.         }
  35.     }
  36.  
  37.     function waitFor(selector, time) {
  38.         if(document.querySelector(selector)==null) {
  39.             waitForElementToDisplay('.p6n-panel-container-inner.p6n-panel-offset-parent.p6n-panel-container-horizontal', 2000);
  40.         }
  41.         else {
  42.             setTimeout(function() {
  43.                 waitFor(selector, time);
  44.             }, time);
  45.         }
  46.     }
  47.  
  48.     $(document).ready(function () {
  49.         $("head").append('<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">');
  50.  
  51.         //waitForElementToDisplay('.p6n-panel-container-inner.p6n-panel-offset-parent.p6n-panel-container-horizontal', 2000);
  52.         waitFor('.left-pannel', 2000);
  53.  
  54.     });
  55.  
  56.     function addBqDarkMode() {
  57.         $(".cfc-action-bar-content-left").append(`<button aria-label="Dark mode" class="toggle-dark-mode mat-focus-indicator mat-button mat-button-base mat-primary" color="primary" mat-button="">    <span class="mat-button-wrapper">      <ace-icon class="ace-icon ace-icon-lightbulb ace-icon-size-small" icon="light" iconset="bigquery" size="small">        <!---->        <mat-icon class="mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true" data-mat-icon-type="svg" data-mat-icon-name="lightbulb_outline" data-mat-icon-namespace="bigquery-small">          <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="18px" height="18px"><g><rect fill="none" height="24" width="24"/></g><g><g/><path d="M12,3c-0.46,0-0.93,0.04-1.4,0.14C7.84,3.67,5.64,5.9,5.12,8.66c-0.48,2.61,0.48,5.01,2.22,6.56C7.77,15.6,8,16.13,8,16.69 V19c0,1.1,0.9,2,2,2h0.28c0.35,0.6,0.98,1,1.72,1s1.38-0.4,1.72-1H14c1.1,0,2-0.9,2-2v-2.31c0-0.55,0.22-1.09,0.64-1.46 C18.09,13.95,19,12.08,19,10C19,6.13,15.87,3,12,3z M14,19h-4v-1h4V19z M14,17h-4v-1h4V17z M12.5,11.41V14h-1v-2.59L9.67,9.59 l0.71-0.71L12,10.5l1.62-1.62l0.71,0.71L12.5,11.41z"/></g></svg>        </mat-icon>        <!---->        <!---->        <!---->      </ace-icon>       <span class="darkModeBTText">Apagar as luses</span>     </span>    <span class="mat-button-ripple mat-ripple" matripple=""></span>    <span class="mat-button-focus-overlay"></span>  </button>`)
  58.  
  59.         var colors = {
  60.             "base": {
  61.                 "BG": "#282A36",
  62.                 "FG": "#F8F8F2",
  63.                 "SELECTION": "#44475A",
  64.                 "COMMENT": "#6272A4",
  65.                 "CYAN": "#8BE9FD",
  66.                 "GREEN": "#50FA7B",
  67.                 "ORANGE": "#FFB86C",
  68.                 "PINK": "#FF79C6",
  69.                 "PURPLE": "#BD93F9",
  70.                 "RED": "#FF5555",
  71.                 "YELLOW": "#F1FA8C"
  72.             },
  73.             "ansi": {
  74.                 "COLOR0": "#21222C",
  75.                 "COLOR1": "#FF5555",
  76.                 "COLOR2": "#50FA7B",
  77.                 "COLOR3": "#F1FA8C",
  78.                 "COLOR4": "#BD93F9",
  79.                 "COLOR5": "#FF79C6",
  80.                 "COLOR6": "#8BE9FD",
  81.                 "COLOR7": "#F8F8F2",
  82.                 "COLOR8": "#6272A4",
  83.                 "COLOR9": "#FF6E6E",
  84.                 "COLOR10": "#69FF94",
  85.                 "COLOR11": "#FFFFA5",
  86.                 "COLOR12": "#D6ACFF",
  87.                 "COLOR13": "#FF92DF",
  88.                 "COLOR14": "#A4FFFF",
  89.                 "COLOR15": "#FFFFFF"
  90.             },
  91.             "brightOther": {
  92.                 "TEMP_QUOTES": "#E9F284",
  93.                 "TEMP_PROPERTY_QUOTES": "#8BE9FE"
  94.             },
  95.             "other": {
  96.                 "LineHighlight": "#44475A75",
  97.                 "NonText": "#FFFFFF1A",
  98.                 "WHITE": "#FFFFFF",
  99.                 "TAB_DROP_BG": "#44475A70",
  100.                 "BGLighter": "#424450",
  101.                 "BGLight": "#343746",
  102.                 "BGDark": "#21222C",
  103.                 "BGDarker": "#191A21"
  104.             }
  105.         }
  106.  
  107.         $("head").append(`
  108. <style>
  109. .darkMode .right-pannel, .darkMode .left-pannel {background-color: ${colors.other.BGDark} !important;}
  110. .darkMode {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  111. .darkMode body {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  112. .darkMode a:visited, .darkMode a:hover{color: #a4a4a4 !important;}
  113.  
  114. .darkMode .central-page.pcc-default-theme {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  115. .darkMode .cfc-action-bar-layout-region.cfc-action-bar-section-left * {background-color: ${colors.other.BGDark} !important; color:${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  116. /*.darkMode .cfc-panel .cfc-panel-side-left * {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}*/
  117. .darkMode .cfc-panel .cfc-panel-side-left * {color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  118. .darkMode .cfc-panel .cfc-panel-side-left .p6n-bq-header-tree-node.p6n-ellipsis.p6n-dynamic-tree-node-wrapper.p6n-dynamic-tree-node-with-border {background-color: ${colors.other.BGDark} !important;}
  119. .darkMode .cfc-panel .cfc-panel-side-left .layout-column {background-color: ${colors.other.BGDark} !important;}
  120. .darkMode .cfc-panel .cfc-panel-side-left .p6n-bq-pin-project-button-container {background-color: ${colors.other.BGDark} !important;}
  121. .darkMode .cfc-panel .cfc-panel-side-left .p6n-vulcan-toolbar.p6n-action-bar-container.md-menu-toolbar.p6n-action-bar-hd.p6n-action-bar-no-title.p6n-action-bar-with-right-content {background-color: ${colors.other.BGDark} !important;}
  122. .darkMode .cfc-panel-divider.cfc-panel-divider-resizable {background-color: ${colors.other.BGDarker} !important;}
  123. .darkMode .cfc-panel .cfc-panel-side-left .jfk-textinput.label-input-label {background-color: ${colors.other.BGLight} !important;}
  124.  
  125. .darkMode .cfc-panel .cfc-panel-side-left input::placeholder {color: ${colors.base.FG} !important;}
  126. .darkMode .cfc-panel .cfc-panel-side-left .cfc-panel-drag-area {background-color: transparent !important;}
  127. .darkMode .cfc-panel .cfc-panel-side-left .cfc-panel-drag-area .cfc-panel-drag-grip {background-color: ${colors.base.FG} !important;}
  128. .darkMode .p6n-bq-query-panel-container {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color:${colors.other.BGDarker} !important;}
  129. .darkMode .p6n-icon-arrow, .p6n-icon-action, .p6n-icon-pagination {fill: ${colors.base.FG}}
  130. .darkMode .p6n-tag {background-color: ${colors.other.BGLighter} !important; color: ${colors.base.COMMENT} !important;}
  131.  
  132. .darkMode .p6n-vulcan-panel-content-bq-no-padding {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  133. .darkMode .p6n-vulcan-toolbar.p6n-action-bar-container  {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  134. .darkMode .p6n-action-bar-title h1 {color: ${colors.base.FG} !important;}
  135. .darkMode .p6n-action-bar-button.md-primary.md-button {color: ${colors.base.FG} !important;}
  136. .darkMode .p6n-dropdown-container {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  137. .darkMode .p6n-dropdown-container * {color: ${colors.base.FG} !important;}
  138.  
  139. .darkMode .p6n-vulcan-panel-content-bq-no-padding * {color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  140. .darkMode .p6n-vulcan-panel-content-bq-no-padding {background-color: ${colors.other.BGDark}; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  141. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-expanding-row {background-color: ${colors.other.BGDark};}
  142. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-expanding-row-summary {background-color: ${colors.other.BGDark};}
  143. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-expanding-row-details-content {background-color: ${colors.other.BGDark};}
  144. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-kv-list-item:nth-child(even) {background-color: ${colors.other.BGDark};}
  145. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-kv-list-item:nth-child(odd) {background-color: ${colors.other.BGLight};}
  146.  
  147. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-autosuggest-input * {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  148. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-autosuggest-input .p6n-filter-bar {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  149. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-autosuggest-input .p6n-filter-bar * {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  150. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-autosuggest-input .p6n-filter-bar *:before {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  151. .darkMode .goog-flat-menu-button.jfk-select {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  152. .darkMode .goog-flat-menu-button.jfk-select:after {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  153. .darkMode .goog-inline-block.goog-flat-menu-button-caption {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  154. .darkMode .goog-inline-block.goog-flat-menu-button-dropdown {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  155. .darkMode .p6n-table th {background-color: ${colors.other.BGDarker} !important; border-color: ${colors.other.BGDarker} !important;}
  156. .darkMode .p6n-table tr:nth-child(even) {background-color: ${colors.other.BGDark} !important;}
  157. .darkMode .p6n-table tr:nth-child(odd) {background-color: ${colors.other.BGLight} !important;}
  158.  
  159. .darkMode .CodeMirror {background-color: ${colors.base.BG} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  160. .darkMode .CodeMirror-gutters {background-color: ${colors.other.BGLight} !important; border-color: ${colors.other.BGDarker} !important;}
  161. .darkMode .CodeMirror .cm-keyword {color: ${colors.base.PINK} !important;}
  162. .darkMode .CodeMirror .cm-string {color: ${colors.base.YELLOW} !important;}
  163. .darkMode .CodeMirror .cm-function {color: ${colors.base.CYAN} !important;}
  164. .darkMode .CodeMirror .cm-recognized-field {color: ${colors.base.PURPLE} !important;}
  165. .darkMode .CodeMirror .cm-number {color: ${colors.base.PURPLE} !important;}
  166. .darkMode .CodeMirror .cm-comment {color: ${colors.base.COMMENT} !important;}
  167. .darkMode .CodeMirror .cm-variable {color: ${colors.base.FG} !important;}
  168. .darkMode .CodeMirror .cm-recognized-table {color: ${colors.base.ORANGE} !important;}
  169. .darkMode .CodeMirror .CodeMirror-linenumber {color: ${colors.base.COMMENT} !important;}
  170. .darkMode .CodeMirror .CodeMirror-cursor {border-color: ${colors.base.FG} !important;}
  171. .darkMode .CodeMirror .CodeMirror-selected {color: ${colors.base.FG} !important;  background: ${colors.base.SELECTION} !important;}
  172. .darkMode .p6n-vulcan-panel-content-bq-no-padding .CodeMirror .CodeMirror-lines .CodeMirror-selected {color: ${colors.base.FG} !important;  background: ${colors.base.SELECTION} !important;}
  173. .darkMode .p6n-bq-cm-highlight-tables .p6n-bq-code-mirror .cm-recognized-table, .darkMode .p6n-bq-cm-highlight-tables .p6n-bq-code-mirror .cm-recognized-routine {background-color: ${colors.other.BGLighter} !important;}
  174.  
  175. .darkMode .p6n-pagination-bar {color: ${colors.base.FG} !important; background-color: ${colors.other.BGDarker} !important; border-color: ${colors.other.BGDarker} !important;}
  176. .darkMode .cfc-bq-panels .jfk-button:not(.jfk-button-flat):not(.jfk-button-primary), .darkMode .cfc-bq-panels .jfk-button-standard, .darkMode .cfc-bq-panels a.goog-flat-menu-button {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  177.  
  178. .darkMode .p6n-message {background-color: ${colors.other.BGLighter} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  179. .darkMode .p6n-bq-run-query-row .p6n-tag {background-color: ${colors.other.BGLight} !important; color: ${colors.base.COMMENT} !important;}
  180. .darkMode .p6n-bq-editor-buttons-left .p6n-icon svg {color: ${colors.base.FG} !important;}
  181. </style>
  182. `);
  183.         var darkMode = localStorage.getItem('darkMode') ? localStorage.getItem('darkMode') : false;
  184.  
  185.         function applyDarkCSS() {
  186.             $("html").addClass('darkMode')
  187.             $(".darkModeBTText").text('Acender as luzes')
  188.         }
  189.         function removeDarkCSS() {
  190.             $("html").removeClass('darkMode')
  191.             $(".darkModeBTText").text('Apagar as luzes')
  192.         }
  193.  
  194.         if (darkMode) {
  195.             applyDarkCSS();
  196.         }else{
  197.             removeDarkCSS();
  198.         }
  199.  
  200.         $(".toggle-dark-mode").click(()=>{
  201.             darkMode = !darkMode;
  202.             localStorage.setItem('darkMode', darkMode);
  203.             if (darkMode) {
  204.                 applyDarkCSS();
  205.             }else{
  206.                 removeDarkCSS();
  207.             }
  208.         })
  209.     }
  210.  
  211.     function addBqSidePanels() {
  212.         console.log("BigQuery Platform Modifier: modifying BQ...");
  213.  
  214.  
  215.  
  216.         var content = $('.p6n-panel-container-inner.p6n-panel-offset-parent.p6n-panel-container-horizontal');
  217.         content.css("flex-direction", "row");
  218.  
  219.         content.prepend( '<div class="left-pannel"></div>' );
  220.         var leftPanel = $('.left-pannel').css("display", "flex").css("flex-direction", "column").css("width", "860px").css('flex', '0 0 auto').css('border-right', '2px solid #999').css('padding-right', '2px');
  221.  
  222.         //content.append( '<div class="splitter"></div>' );
  223.         //var splitter = $('.splitter').css("flex", "0 0 auto").css("width", "2px").css("cursor", "col-resize").css("background-color", "#999")
  224.  
  225.         content.append( '<div class="right-pannel"></div>' );
  226.         var rightPanel = $('.right-pannel');
  227.  
  228.         $(rightPanel).css("flex-grow", "1").css("flex", "1 1 auto").css("overflow", "hidden");
  229.  
  230.         var title = content.find('.p6n-bq-query-editor-title-container')[0];
  231.         var editor = content.find('.p6n-vulcan-panel.bq-query-editor-panel.p6n-panel')[0];
  232.  
  233.         $(title).appendTo(leftPanel);
  234.         $(editor).appendTo(leftPanel);
  235.         $(editor).css("height", "100%");
  236.  
  237.         var results = content.find('.p6n-vulcan-panel-primary.bq-main-panel.p6n-panel.p6n-panel-center')[0];
  238.  
  239.         var toRemove = content.find('.p6n-panel-splitter.p6n-panel-splitter-horizontal.p6n-panel-splitter-resizable')[0];
  240.         toRemove.remove();
  241.  
  242.         $(results).appendTo(rightPanel);
  243.         $(results).css("height", "100%");
  244.  
  245.         $('.left-pannel').resizable({
  246.             handles: 'e',
  247.             resizeHeight: false,
  248.             minWidth: 100
  249.         });
  250.  
  251.         $('.p6n-vulcan-panel-content-bq-no-padding').css("overflow", "hidden");
  252.  
  253.         console.log("BigQuery Platform Modifier: done modifying BQ...");
  254.     }
  255. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址