BigQuery Platform Modifier

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

当前为 2020-12-04 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name BigQuery Platform Modifier
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.5
  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. addBqDarkMode();
  24. return;
  25. }
  26. else {
  27. setTimeout(function() {
  28. waitForElementToDisplay(selector, time);
  29. }, time);
  30. }
  31. }
  32.  
  33. $(document).ready(function () {
  34. $("head").append('<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">');
  35.  
  36. waitForElementToDisplay('.p6n-panel-container-inner.p6n-panel-offset-parent.p6n-panel-container-horizontal', 2000);
  37.  
  38. });
  39.  
  40. function addBqDarkMode() {
  41. $(".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>`)
  42.  
  43. var colors = {
  44. "base": {
  45. "BG": "#282A36",
  46. "FG": "#F8F8F2",
  47. "SELECTION": "#44475A",
  48. "COMMENT": "#6272A4",
  49. "CYAN": "#8BE9FD",
  50. "GREEN": "#50FA7B",
  51. "ORANGE": "#FFB86C",
  52. "PINK": "#FF79C6",
  53. "PURPLE": "#BD93F9",
  54. "RED": "#FF5555",
  55. "YELLOW": "#F1FA8C"
  56. },
  57. "ansi": {
  58. "COLOR0": "#21222C",
  59. "COLOR1": "#FF5555",
  60. "COLOR2": "#50FA7B",
  61. "COLOR3": "#F1FA8C",
  62. "COLOR4": "#BD93F9",
  63. "COLOR5": "#FF79C6",
  64. "COLOR6": "#8BE9FD",
  65. "COLOR7": "#F8F8F2",
  66. "COLOR8": "#6272A4",
  67. "COLOR9": "#FF6E6E",
  68. "COLOR10": "#69FF94",
  69. "COLOR11": "#FFFFA5",
  70. "COLOR12": "#D6ACFF",
  71. "COLOR13": "#FF92DF",
  72. "COLOR14": "#A4FFFF",
  73. "COLOR15": "#FFFFFF"
  74. },
  75. "brightOther": {
  76. "TEMP_QUOTES": "#E9F284",
  77. "TEMP_PROPERTY_QUOTES": "#8BE9FE"
  78. },
  79. "other": {
  80. "LineHighlight": "#44475A75",
  81. "NonText": "#FFFFFF1A",
  82. "WHITE": "#FFFFFF",
  83. "TAB_DROP_BG": "#44475A70",
  84. "BGLighter": "#424450",
  85. "BGLight": "#343746",
  86. "BGDark": "#21222C",
  87. "BGDarker": "#191A21"
  88. }
  89. }
  90.  
  91. $("head").append(`
  92. <style>
  93. .darkMode .right-pannel, .darkMode .left-pannel {background-color: ${colors.other.BGDark} !important;}
  94. .darkMode {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  95. .darkMode body {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  96. .darkMode a:visited, .darkMode a:hover{color: #a4a4a4 !important;}
  97.  
  98. .darkMode .central-page.pcc-default-theme {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  99. .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;}
  100. .darkMode .p6n-vulcan-toolbar.p6n-action-bar-no-title.p6n-action-bar-with-right-content * {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  101. .darkMode .cfc-panel .cfc-panel-side-left * {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  102. .darkMode .cfc-panel .cfc-panel-side-left input::placeholder {color: ${colors.base.FG} !important;}
  103. .darkMode .cfc-panel .cfc-panel-side-left .cfc-panel-drag-area {background-color: transparent !important;}
  104. .darkMode .cfc-panel .cfc-panel-side-left .cfc-panel-drag-area .cfc-panel-drag-grip {background-color: ${colors.base.FG} !important;}
  105. .darkMode .p6n-bq-query-panel-container {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color:${colors.other.BGDarker} !important;}
  106. .darkMode .p6n-icon-arrow, .p6n-icon-action, .p6n-icon-pagination {fill: ${colors.base.FG}}
  107.  
  108. .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;}
  109. .darkMode .p6n-vulcan-toolbar.p6n-action-bar-container {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  110. .darkMode .p6n-vulcan-toolbar.p6n-action-bar-container * {background-color: ${colors.other.BGDark} !important; color: ${colors.base.FG} !important; border-color: ${colors.other.BGDarker} !important;}
  111. .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;}
  112. .darkMode .p6n-vulcan-panel-content-bq-no-padding .p6n-autosuggest-input * {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  113. .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;}
  114. .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;}
  115. .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;}
  116. .darkMode .goog-flat-menu-button.jfk-select {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  117. .darkMode .goog-flat-menu-button.jfk-select:after {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  118. .darkMode .goog-inline-block.goog-flat-menu-button-caption {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  119. .darkMode .goog-inline-block.goog-flat-menu-button-dropdown {background-color: ${colors.other.BGLight} !important; color: ${colors.base.FG} !important;}
  120.  
  121. .darkMode .CodeMirror *::selection {color: ${colors.base.FG} !important; background: ${colors.base.SELECTION} !important;}
  122. .darkMode .CodeMirror ::selection {color: ${colors.base.FG} !important; background: ${colors.base.SELECTION} !important;}
  123. .darkMode .CodeMirror {background-color: ${colors.base.BG} !important; color: ${colors.base.FG} !important;}
  124. .darkMode .CodeMirror-gutters {background-color: ${colors.other.BGDark} !important;}
  125. .darkMode .CodeMirror .cm-keyword {color: ${colors.base.PINK} !important;}
  126. .darkMode .CodeMirror .cm-string {color: ${colors.base.YELLOW} !important;}
  127. .darkMode .CodeMirror .cm-function {color: ${colors.base.CYAN} !important;}
  128. .darkMode .CodeMirror .cm-recognized-field {color: ${colors.base.PURPLE} !important;}
  129. .darkMode .CodeMirror .cm-number {color: ${colors.base.PURPLE} !important;}
  130. .darkMode .CodeMirror .cm-comment {color: ${colors.base.COMMENT} !important;}
  131. .darkMode .CodeMirror .cm-variable {color: ${colors.base.FG} !important;}
  132. .darkMode .CodeMirror .cm-recognized-table {color: ${colors.base.ORANGE} !important;}
  133. .darkMode .CodeMirror .CodeMirror-linenumber {color: ${colors.base.COMMENT} !important;}
  134. </style>
  135. `);
  136. var darkMode = localStorage.getItem('darkMode') ? localStorage.getItem('darkMode') : false;
  137.  
  138. function applyDarkCSS() {
  139. $("html").addClass('darkMode')
  140. $(".darkModeBTText").text('Acender as luzes')
  141. }
  142. function removeDarkCSS() {
  143. $("html").removeClass('darkMode')
  144. $(".darkModeBTText").text('Apagar as luzes')
  145. }
  146.  
  147. if (darkMode) {
  148. applyDarkCSS();
  149. }else{
  150. removeDarkCSS();
  151. }
  152.  
  153. $(".toggle-dark-mode").click(()=>{
  154. darkMode = !darkMode;
  155. localStorage.setItem('darkMode', darkMode);
  156. if (darkMode) {
  157. applyDarkCSS();
  158. }else{
  159. removeDarkCSS();
  160. }
  161. })
  162. }
  163.  
  164. function addBqSidePanels() {
  165. console.log("BigQuery Platform Modifier: modifying BQ...");
  166.  
  167.  
  168.  
  169. var content = $('.p6n-panel-container-inner.p6n-panel-offset-parent.p6n-panel-container-horizontal');
  170. content.css("flex-direction", "row");
  171.  
  172. content.prepend( '<div class="left-pannel"></div>' );
  173. 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');
  174.  
  175. //content.append( '<div class="splitter"></div>' );
  176. //var splitter = $('.splitter').css("flex", "0 0 auto").css("width", "2px").css("cursor", "col-resize").css("background-color", "#999")
  177.  
  178. content.append( '<div class="right-pannel"></div>' );
  179. var rightPanel = $('.right-pannel');
  180.  
  181. $(rightPanel).css("flex-grow", "1").css("flex", "1 1 auto");
  182.  
  183. var title = content.find('.p6n-bq-query-editor-title-container')[0];
  184. var editor = content.find('.p6n-vulcan-panel.bq-query-editor-panel.p6n-panel')[0];
  185.  
  186. $(title).appendTo(leftPanel);
  187. $(editor).appendTo(leftPanel);
  188. $(editor).css("height", "100%");
  189.  
  190. var results = content.find('.p6n-vulcan-panel-primary.bq-main-panel.p6n-panel.p6n-panel-center')[0];
  191.  
  192. var toRemove = content.find('.p6n-panel-splitter.p6n-panel-splitter-horizontal.p6n-panel-splitter-resizable')[0];
  193. toRemove.remove();
  194.  
  195. $(results).appendTo(rightPanel);
  196. $(results).css("height", "100%");
  197.  
  198. $('.left-pannel').resizable({
  199. resizeHeight: false,
  200. minWidth: 100
  201. });
  202.  
  203. console.log("BigQuery Platform Modifier: done modifying BQ...");
  204. }
  205. })();

QingJ © 2025

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