Make "copy code" button the same size as the "copy path" button

rust-lang · Jun 3, 2024 · 2db9593 · 2db9593
1 parent 228d528
commit 2db9593
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 25 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -24,14 +24,8 @@ xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
 <path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
 </svg>');
-	--clipboard-image-big: url('data:image/svg+xml,<svg width="22" height="23" viewBox="0 0 24 25" \
-xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
-<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
-0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
-7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
-2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
-<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
-</svg>');
+	--copy-path-height: 34px;
+	--copy-path-width: 33px;
 	/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
 	--checkmark-image: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" \
 xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
@@ -1406,9 +1400,9 @@ documentation. */
 	z-index: 1;
 }
 a.test-arrow {
-	padding: 5px 10px 5px 10px;
+	padding: 5px 7px;
 	border-radius: 5px;
-	font-size: 1.375rem;
+	font-size: 1rem;
 	color: var(--test-arrow-color);
 	background-color: var(--test-arrow-background-color);
 }
@@ -1420,36 +1414,32 @@ a.test-arrow:hover {
 	display: flex;
 }
 .example-wrap:hover > .test-arrow {
-	padding: 3px 10px;
+	padding: 2px 7px;
 }
 .example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder {
 	visibility: visible;
 }
 .example-wrap .button-holder .copy-button {
 	color: var(--copy-path-button-color);
 	background: var(--main-background-color);
-	height: 43px;
-	width: 40px;
+	height: var(--copy-path-height);
+	width: var(--copy-path-width);
 	margin-left: 5px;
 	padding: 2px 0 0 4px;
 	border: 0;
 	cursor: pointer;
 	border-radius: 5px;
 }
-.example-wrap .button-holder .copy-button.clicked {
-	padding-top: 4px;
-}
 .example-wrap .button-holder .copy-button::before {
 	filter: var(--copy-path-img-filter);
-	content: var(--clipboard-image-big);
-	width: 23px;
-	height: 22px;
+	content: var(--clipboard-image);
 }
 .example-wrap .button-holder .copy-button:hover::before {
 	filter: var(--copy-path-img-hover-filter);
 }
 .example-wrap .button-holder .copy-button.clicked::before {
 	content: var(--checkmark-image);
+	padding-right: 5px;
 }
 
 .code-attribute {
@@ -1698,8 +1688,8 @@ a.tooltip:hover::after {
 #copy-path {
 	color: var(--copy-path-button-color);
 	background: var(--main-background-color);
-	height: 34px;
-	width: 33px;
+	height: var(--copy-path-height);
+	width: var(--copy-path-width);
 	margin-left: 10px;
 	padding: 0;
 	padding-left: 2px;
@@ -1709,8 +1699,6 @@ a.tooltip:hover::after {
 #copy-path::before {
 	filter: var(--copy-path-img-filter);
 	content: var(--clipboard-image);
-	width: 19px;
-	height: 18px;
 }
 #copy-path:hover::before {
 	filter: var(--copy-path-img-hover-filter);

diff --git a/tests/rustdoc-gui/copy-code.goml b/tests/rustdoc-gui/copy-code.goml
@@ -14,6 +14,12 @@ define-function: (
         assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
         move-cursor-to: ".search-input"
         assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
+        // Checking that the copy button has the same size as the "copy path" button.
+        compare-elements-size: (
+            "#copy-path",
+            ".example-wrap:nth-of-type(1) .copy-button",
+            ["height", "width"],
+        )
     },
 )
 

diff --git a/tests/rustdoc-gui/run-on-hover.goml b/tests/rustdoc-gui/run-on-hover.goml
@@ -17,15 +17,15 @@ define-function: (
             "visibility": "visible",
             "color": |color|,
             "background-color": |background|,
-            "font-size": "22px",
+            "font-size": "16px",
             "border-radius": "5px",
         })
         move-cursor-to: ".test-arrow"
         assert-css: (".test-arrow:hover", {
             "visibility": "visible",
             "color": |hover_color|,
             "background-color": |hover_background|,
-            "font-size": "22px",
+            "font-size": "16px",
             "border-radius": "5px",
         })
     },