From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 20 Sep 2015 22:47:29 +0000 (+0200)
Subject: make newTab and inspector tool work well from 40 up to 43 nightly
X-Git-Tag: LCARStrek-2.37^0
X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=1f756abf03f98e18ecac7bc2d4e6d58682a47076

make newTab and inspector tool work well from 40 up to 43 nightly
---

diff --git a/LCARStrek/browser/devtools/add.svg b/LCARStrek/browser/devtools/add.svg
new file mode 100644
index 00000000..a9c169ce
--- /dev/null
+++ b/LCARStrek/browser/devtools/add.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <style>
+      use[id^="add"]:not(:target) {
+        display: none;
+      }
+    </style>
+    <g id="add-shape" fill="currentColor">
+      <rect x="3" y="7" width="10" height="2" />
+      <rect x="7" y="3" width="2" height="10" />
+    </g>
+  </defs>
+  <use xlink:href="#add-shape" id="add" color="#FFCF00"/>
+  <use xlink:href="#add-shape" id="add-checked" color="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 8c0f9a5a..a6f7eabc 100644
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -419,6 +419,12 @@ div.CodeMirror span.eval-text {
 .devtools-searchinput {
   background-color: #000000;
   color: #E7ADE7;
+  border: 1px solid #9C9CFF;
+}
+
+.devtools-textinput:focus,
+.devtools-searchinput:focus {
+  border-color: #008484;
 }
 
 .CodeMirror-Tern-fname {
diff --git a/LCARStrek/browser/devtools/layoutview.css b/LCARStrek/browser/devtools/layoutview.css
index ed74d93c..0c295a3a 100644
--- a/LCARStrek/browser/devtools/layoutview.css
+++ b/LCARStrek/browser/devtools/layoutview.css
@@ -6,43 +6,313 @@
   box-sizing: border-box;
 }
 
+body {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
+  /* "Contain" the absolutely positioned #main element */
+  position: relative;
+}
+
+/* Header: contains the position and size of the element */
+
+#header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px 14px;
+  display: -moz-box;
+  vertical-align: top;
+}
+
+#header:-moz-dir(rtl) {
+  -moz-box-direction: reverse;
+}
+
+#header > span {
+  display: -moz-box;
+}
+
+#element-size {
+  -moz-box-flex: 1;
+}
+
+#element-size:-moz-dir(rtl) {
+  -moz-box-pack: end;
+}
+
+@media (max-height: 228px) {
+  #header {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 10px;
+    margin-bottom: 8px;
+  }
+}
+
+/* Main: contains the box-model regions */
+
 #main {
+  position: absolute;
+  box-sizing: border-box;
+  /* The regions are semi-transparent, so the white background is partly
+     visible */
   background-color: #FF9F00;
-  border-color: #A09090;
-  border-style: dotted;
   color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 0 14px 10px 14px;
+  width: calc(100% - 2 * 14px);
 }
 
 .margin,
 .size {
-  color: var(--theme-selection-color);
+/*  color: var(--theme-highlight-blue); */
 }
 
+/* Regions are 3 nested elements with wide borders and outlines */
+
 #content {
-  background-color: #008484;
+  height: 25px;
+}
+
+#margins,
+#borders,
+#padding {
+  border-color: var(-theme-splitter-color);
+  border-width: 25px;
+  border-style: solid;
+  outline: dotted 1px var(-theme-splitter-color);
 }
 
-#padding,
 #margins {
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
 }
 
-#padding {
-  background-color: #9C9CFF;
-  border-color: #9C9CFF;
+/* Respond to window size change by changing the size of the regions */
+
+@media (max-height: 228px) {
+  #content {
+    height: 18px;
+  }
+
+  #margins,
+  #borders,
+  #padding {
+    border-width: 18px;
+  }
 }
 
-#borders {
-  background-color: #FFCF00;
+/* Regions colors */
+
+#margins {
   border-color: #FFCF00;
 }
 
-#margins {
-  background-color: #A09090;
+#borders {
   border-color: #A09090;
 }
 
+#padding {
+  border-color: #8050B0;
+}
+
+#content {
+  background-color: #008484;
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#main > p {
+  position: absolute;
+  pointer-events: none;
+}
+
+#main > p {
+  margin: 0;
+  text-align: center;
+}
+
+#main > p > span {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.top,
+.bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+}
+
+.padding.top {
+  top: 55px;
+}
+
+.padding.bottom {
+  bottom: 57px;
+}
+
+.border.top {
+  top: 30px;
+}
+
+.border.bottom {
+  bottom: 31px;
+}
+
+.margin.top {
+  top: 5px;
+}
+
+.margin.bottom {
+  bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right {
+  top: 22px;
+  line-height: 132px;
+}
+
+.size {
+  width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left {
+  width: 25px;
+}
+
+.padding.left {
+  left: 52px;
+}
+
+.padding.right {
+  right: 51px;
+}
+
+.border.left {
+  left: 26px;
+}
+
+.border.right {
+  right: 26px;
+}
+
+.margin.right {
+  right: 0;
+}
+
+.margin.left {
+  left: 0;
+}
+
+.rotate.left:not(.editing) {
+  transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+  transform: rotate(90deg);
+}
+
+/* Coordinates should be different when the window is small, because we make
+   the regions smaller then */
+
+@media (max-height: 228px) {
+  .padding.top {
+    top: 37px;
+  }
+
+  .padding.bottom {
+    bottom: 38px;
+  }
+
+  .border.top {
+    top: 19px;
+  }
+
+  .border.bottom {
+    bottom: 20px;
+  }
+
+  .margin.top {
+    top: 1px;
+  }
+
+  .margin.bottom {
+    bottom: 2px;
+  }
+
+  .size,
+  .margin.left,
+  .margin.right,
+  .border.left,
+  .border.right,
+  .padding.left,
+  .padding.right {
+    line-height: 80px;
+  }
+
+  .margin.right,
+  .margin.left,
+  .border.left,
+  .border.right,
+  .padding.right,
+  .padding.left {
+    width: 21px;
+  }
+
+  .padding.left {
+    left: 35px;
+  }
+
+  .padding.right {
+    right: 35px;
+  }
+
+  .border.left {
+    left: 16px;
+  }
+
+  .border.right {
+    right: 17px;
+  }
+}
+
+/* Legend, displayed inside regions */
+
+.legend {
+  position: absolute;
+  margin: 5px 6px;
+  z-index: 1;
+}
+
+.legend[data-box="margin"] {
+  color: #000000;
+}
+
+@media (max-height: 228px) {
+  .legend {
+    margin: 2px 6px;
+  }
+}
+
+/* Editable fields */
+
 .editable {
   border: 1px dashed transparent;
+  -moz-user-select: text;
 }
 
 .editable:hover {
@@ -52,4 +322,18 @@
 .styleinspector-propertyeditor {
   border: 1px solid #008484;
   padding: 0;
-}
\ No newline at end of file
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.size > span {
+  cursor: default;
+}
+
+/* Hide all values when the view is inactive */
+
+body.inactive > #header > #element-position,
+body.inactive > #header > #element-size,
+body.inactive > #main > p {
+   visibility: hidden;
+}
diff --git a/LCARStrek/browser/devtools/pseudo-class.svg b/LCARStrek/browser/devtools/pseudo-class.svg
new file mode 100644
index 00000000..5c41473d
--- /dev/null
+++ b/LCARStrek/browser/devtools/pseudo-class.svg
@@ -0,0 +1,29 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <style>
+      use[id^="pseudo-class"]:not(:target) {
+        display: none;
+      }
+    </style>
+    <rect id="class-block-maskBG" width="8" height="8" fill="#fff"/>
+    <rect id="class-block" width="8" height="8" rx="1" ry="1"/>
+    <mask id="mask-block-solid">
+      <use xlink:href="#class-block-maskBG"/>
+      <use xlink:href="#class-block" transform="translate(3 3)" fill="#000"/>
+    </mask>
+    <g id="pseudo-class-shape">
+      <rect x=".5" y=".5" width="7" height="7" rx="1" ry="1" mask="url(#mask-block-solid)" fill="none" stroke="currentColor" stroke-width="1"/>
+      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" fill-opacity=".4"/>
+      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" transform="translate(4 4)"/>
+      <g transform="translate(8 8)" fill="currentColor">
+        <path d="M2.5,0C2.2,0,2,0.2,2,0.5C2,0.8,2.2,1,2.5,1C2.8,1,3,0.8,3,0.5 C3,0.2,2.8,0,2.5,0z M4.5,0C4.2,0,4,0.2,4,0.5C4,0.8,4.2,1,4.5,1C4.8,1,5,0.8,5,0.5C5,0.2,4.8,0,4.5,0z M0.5,6C0.8,6,1,5.8,1,5.5 C1,5.2,0.8,5,0.5,5C0.2,5,0,5.2,0,5.5C0,5.8,0.2,6,0.5,6z M0.5,4C0.8,4,1,3.8,1,3.5C1,3.2,0.8,3,0.5,3C0.2,3,0,3.2,0,3.5 C0,3.8,0.2,4,0.5,4z M7.5,2C7.2,2,7,2.2,7,2.5C7,2.8,7.2,3,7.5,3C7.8,3,8,2.8,8,2.5C8,2.2,7.8,2,7.5,2z M7.5,4C7.2,4,7,4.2,7,4.5 C7,4.8,7.2,5,7.5,5C7.8,5,8,4.8,8,4.5C8,4.2,7.8,4,7.5,4z M5.5,7C5.2,7,5,7.2,5,7.5C5,7.8,5.2,8,5.5,8C5.8,8,6,7.8,6,7.5 C6,7.2,5.8,7,5.5,7z M3.5,7C3.2,7,3,7.2,3,7.5C3,7.8,3.2,8,3.5,8C3.8,8,4,7.8,4,7.5C4,7.2,3.8,7,3.5,7z M0.5,2C0.8,2,1,1.8,1,1.5v-1 C1,0.2,0.8,0,0.5,0C0.2,0,0,0.2,0,0.5v1C0,1.8,0.2,2,0.5,2z M8,0.5C8,0.2,7.8,0,7.5,0h-1C6.2,0,6,0.2,6,0.5C6,0.8,6.2,1,6.5,1h1 C7.8,1,8,0.8,8,0.5z M7.5,6C7.2,6,7,6.2,7,6.5v1C7,7.8,7.2,8,7.5,8C7.8,8,8,7.8,8,7.5v-1C8,6.2,7.8,6,7.5,6z M1.5,7h-1 C0.2,7,0,7.2,0,7.5C0,7.8,0.2,8,0.5,8h1C1.8,8,2,7.8,2,7.5C2,7.2,1.8,7,1.5,7z"/>
+        <use xlink:href="#class-block" fill-opacity=".2"/>
+      </g>
+    </g>
+  </defs>
+  <use xlink:href="#pseudo-class-shape" id="pseudo-class" color="#FFCF00"/>
+  <use xlink:href="#pseudo-class-shape" id="pseudo-class-checked" color="#000000"/>
+</svg>
diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css
index 00ee6f91..182a97ac 100644
--- a/LCARStrek/browser/devtools/ruleview.css
+++ b/LCARStrek/browser/devtools/ruleview.css
@@ -245,3 +245,25 @@
 .ruleview-selectorhighlighter.highlighted {
   background-position: -16px 0;
 }
+
+#pseudo-class-panel:not([hidden]) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://browser/skin/devtools/add.svg#add");
+  background-size: cover;
+}
+#ruleview-add-rule-button:hover::before {
+  background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
+}
+
+#pseudo-class-panel-toggle::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+  background-size: cover;
+}
+#pseudo-class-panel-toggle:hover::before,
+#pseudo-class-panel-toggle[checked]::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
+  filter: none !important;
+}
diff --git a/LCARStrek/browser/magnifier-hover.png b/LCARStrek/browser/magnifier-hover.png
new file mode 100644
index 00000000..c011e8b2
Binary files /dev/null and b/LCARStrek/browser/magnifier-hover.png differ
diff --git a/LCARStrek/browser/magnifier-hover@2x.png b/LCARStrek/browser/magnifier-hover@2x.png
new file mode 100644
index 00000000..68172a97
Binary files /dev/null and b/LCARStrek/browser/magnifier-hover@2x.png differ
diff --git a/LCARStrek/browser/magnifier.png b/LCARStrek/browser/magnifier.png
index bcce4ad2..35009601 100644
Binary files a/LCARStrek/browser/magnifier.png and b/LCARStrek/browser/magnifier.png differ
diff --git a/LCARStrek/browser/magnifier@2x.png b/LCARStrek/browser/magnifier@2x.png
index 6aef26a1..12616e4e 100644
Binary files a/LCARStrek/browser/magnifier@2x.png and b/LCARStrek/browser/magnifier@2x.png differ
diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index 37cbe79d..f1455c73 100644
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -252,6 +252,30 @@ body {
 }
 
 /* SEARCH */
+#newtab-search-logo:hover {
+  background-color: #FFCF00;
+  border: none;
+}
+#newtab-search-logo[active] {
+  background-color: #FF9F00;
+  border: none;
+}
+#newtab-search-logo {
+  background-image: url("chrome://browser/skin/magnifier.png");
+}
+#newtab-search-logo.magnifier[active],
+#newtab-search-logo.magnifier:hover {
+  background-image: url("chrome://browser/skin/magnifier-hover.png");
+}
+/* Newer versions only */
+#newtab-search-icon {
+  background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
+}
+#newtab-search-logo.magnifier[active],
+#newtab-search-logo.magnifier:hover {
+  background-image: url("chrome://browser/skin/magnifier-hover.png");
+}
+
 #newtab-search-text {
   border: 1px solid #9C9CFF;
   background-color: #000000;
@@ -266,20 +290,88 @@ body {
 }
 
 #newtab-search-submit {
-  background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+  background-image: none;
   background-color: #C09070;
+  color: #000000;
+  box-shadow: none;
   border-radius: 0 300px 300px 0;
   border: none;
   -moz-margin-start: 3px;
 }
 #newtab-search-text:focus + #newtab-search-submit,
 #newtab-search-text[autofocus] + #newtab-search-submit {
-  background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+  background-image: none;
   background-color: #008484;
+  color: #000000;
   box-shadow: none;
 }
 #newtab-search-text + #newtab-search-submit:hover {
-  background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+  background-image: none;
   background-color: #FFCF00;
+  color: #000000;
   box-shadow: none;
 }
+/* Newer versions only */
+#newtab-search-submit[value=""],
+#newtab-search-text:focus + #newtab-search-submit[value=""],
+#newtab-search-text[autofocus] + #newtab-search-submit[value=""],
+#newtab-search-text + #newtab-search-submit[value=""]:hover {
+  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
+}
+
+/* CUSTOMIZE */
+#newtab-customize-overlay {
+  background: #A09090;
+}
+
+#newtab-customize-panel,
+#newtab-customize-panel-anchor,
+#newtab-customize-panel-inner-wrapper,
+.newtab-customize-panel-item,
+.newtab-customize-complex-option {
+  background-color: #000000;
+}
+
+#newtab-customize-title {
+  color: #9C9CFF;
+  background-color: #000000;
+}
+
+.newtab-customize-panel-item[selected],
+.newtab-customize-panel-subitem[selected] {
+  color: #FF9F00;
+}
+
+.newtab-customize-panel-item:not([selected]),
+.newtab-customize-panel-subitem:not([selected]) {
+  color: #A09090;
+}
+
+.newtab-customize-panel-subitem > .checkbox {
+  background-color: #000000;
+  border-color: #A09090;
+}
+
+.newtab-customize-panel-subitem[selected] > .checkbox {
+  background-color: #000000;
+  background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
+  color: #FF9F00;
+}
+
+.newtab-customize-panel-item:not(:first-child),
+.newtab-search-panel-engine {
+  border-top: 1px solid #A09090;
+}
+
+.newtab-customize-complex-option:hover > .selectable:not([selected]),
+.selectable:hover:not([selected]),
+.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
+.newtab-customize-panel-item:hover:not([selected]) {
+  background-color: #FFCF00;
+  color: #000000;
+}
+
+.newtab-customize-complex-option:hover > .selectable:not([selected]),
+.selectable:hover:not([selected]) {
+  background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");
+}
diff --git a/LCARStrek/browser/search-indicator-magnifying-glass.svg b/LCARStrek/browser/search-indicator-magnifying-glass.svg
new file mode 100644
index 00000000..a34e82b5
--- /dev/null
+++ b/LCARStrek/browser/search-indicator-magnifying-glass.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#A09090" d="M21.7,20.3l-1.4,1.4l-5.4-5.4c-1.3,1-3,1.7-4.9,1.7 c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8c0,1.8-0.6,3.5-1.7,4.9L21.7,20.3z M10,4c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6 S13.3,4,10,4z"/>
+</svg>
diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css
index 3ad5e539..9bcb30ab 100644
--- a/LCARStrek/global/in-content/info-pages.css
+++ b/LCARStrek/global/in-content/info-pages.css
@@ -18,7 +18,8 @@ body {
   max-width: 52em;
 }
 
-.container.flex {
+.container.flex,
+.container.restore-chosen {
   display: flex;
   flex-direction: column;
   flex-grow: 1;